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乍 一 看 ， 你 可 能 觉得 HTML5 是 网 页 编写 语言 HTML 的 第 5 个 版 本 。 但 实际 上 ， 这 背后 的 故事 
可 乱 得 多 。 

HTML5 是 一 个 叛逆 。 它 是 由 一 群 自 由 思想 者 组 成 的 团队 设计 出 来 的 ， 这 个 团队 的 成 员 并 不 
人 负责 制定 官方 HTML 标 准 。 它 允许 使 用 10 年 前 就 被 禁止 的 网 页 编写 方式 。 它 费 尽心 机 、 昔 口 疲 心 
地 告诉 浏览 需 开 发 商 怎 么 处 理 而 不 是 彻底 拒绝 标记 中 的 错误 。 它 最 终 实现 了 不 依赖 Flash 等 浏览 融 
插件 播放 视频 。 而 且 它 引入 了 一 大 批 JavaScript 驱 动 的 功能 ,让 网 页 可 以 像 桌 面 软件 那样 丰富 多 彩 、 
富有 交互 能 

理解 HTML5 可 没有 那么 简单 。 最 主要 的 困难 在 于 人 们 用 HTML5 这 个 词 指 代 十 几 其 至 更 多 种 
独立 的 标准 。( 后 面 我 们 会 介绍 到 ， 这 是 HTML5 发 展演 进 的 结果 。 一 开始 时 它 只 有 一 个 标准 ,但 
后 来 就 拆 分 成 了 很 多 容易 管理 的 分 支 。) 事实 上 ，HTML5 现 在 代表 的 是 “HTML5 及 所 有 相关 标 
准 ”， 甚 至 还 可 以 更 宽泛 ， 人 代表“ 下 一 代 网 页 编写 技术 ”。 这 就 是 本 书 要 带领 大 家 探索 的 HTMLS: 
既 包 括 HIMLS 核 心声 言 ， 也 包括 与 HIMLS 纠 缠 在 一 块 但 在 其 标准 中 永远 找 不 到 的 那些 新 功能 。 

于 是 ， 第 二 个 困难 又 摆 在 了 你 的 面前 : 浏览 器 文 持 。 不 同 的 训 览 融 文 持 HTMLS 的 不 同 部 分 ， 
而 且 还 有 一 些 让 人 难受 的 新 功能 ， 任 何平 台 的 浏览 需 都 不 文 持 。 

抛 开 这 些 困 难 ， 有 一 个 事实 接受 起 来 训 无 挑战 性 : HTML5 代 表 未 来 。 苹 果 、 合 歌 等 大 软件 
公司 都 在 鼎力 支持 它 ; W3C (World Wide Web Consortium ， 万 维 网 联盟 ) ELZSTWE f XHTML, 
从 而 使 HTML5 成 为 正式 标准 并 得 到 认可 ; 而 且 所 有 浏览 圳 开发 商 现在 都 对 它 的 大 部 分 功能 给 予 
了 支持 。 如 果 你 在 看 这 本 书 ， 那 就 有 可 能 在 它 还 让 人 觉得 好 玩 和 刺激 的 时 候 加 入 HTML5 阵 营 ， 
并 创造 出 如 图 0-1 所 示 的 那 种 酷 炫 的 网 页 。 


阅读 本 书 的 条 件 


本 书 介绍 的 HIML5 是 HTML 标准 最 新 最 好 的 版 本 。 虽 然 不 一 定 非 得 是 标记 大 师 才 能 看 收 这 本 
书 ， 但 阅读 本 书 的 的 确 确 还 是 需要 一 些 Web 设 计 经 验 的 。 以 下 就 是 几 个 必要 条 件 。 
口 写 过 网 页 。 本 书 假设 你 以 前 至 少 写 过 一 些 网 页 (或 者 至 少 知 道 怎 么 使 用 HTML 元 系 把 内 容 
分 成 标题 、 段 洲 和 列表 ， 等 等 )。 如 条 你 才刚 刚 接 和 触 web 设计 ， 那 最 好 是 先 找 一 本 合适 的 
入 门 书 看 一 看 ， 比 如 我 的 Creating a Website: The Missing Manual。( 不 过 别 担心 ,你 不 会 被 
限制 在 过 去 的 技术 中 ，Creating a Website 这 本 书 里 的 示例 都 是 有 效 的 HTML5 文 档 。) 



























































| 图 0-1: 在 Web 世 界 黑暗 的 过 去 

S| CAHTML5XChapter 07\Maze.html Y í 2h EI — x, " 
© Canvas Maze Game | | ( 也 就 是 去 年 ) 要 纺 ^ 网 页 游戏 à 
必须 依赖 Flash 这 样 的 浏览 器 插 
ft, 但 有 了 HTML5 的 新 功能 











包括 canvas ( 图 中 显示 的 就 是 ) 
之 后 ， 你 可 以 使 用 可 靠 而 又 免 插 
件 的 JavaScript。 这 个 图 展示 的 是 
用 HTML5 技 术 开 发 的 迷宫 游戏 
( 第 7 章 将 详细 讨论 ) 





| Restart | | Load Easy Maze || Load Hard Maze | 




















O 懂 样 式 表 。 没 有 CSS (Cascading Style Sheet, EE) 就 没 如 今 的 网 站 。CSS 为 页 面 
提供 布局 和 格式 。 要 想 顺 利 阅 读本 书 ， 你 应 该 知道 样式 表 的 基本 知识 ， 包 括 怎 么 创建 样 
AK, 里面 都 有 什么 ， 以 及 怎么 把 它 应 用 到 网 页 上 。 如 果 你 不 太 清 楚 CSS 是 干什么 的 ， 可 
以 先 看 一 看 附录 A (“CSS 人 简明 教程 ”), 如 琳 你 需要 更 多 帮助 , 或 者 想 提 高 目 己 的 CSS 拉 能 ， 
以 便 真正 做 出 漂亮 的 布局 和 样式 ， 建 议 你 看 看 David Sawyer McFarlandll] CSS: The Missing 
Manual ( O'Reilly ). 

Q 懂 JavaScript。 当 然 ， 编 写 HTML5 页 面 用 不 着 JavaScript。 可 是 ， 如 果 你 想 使 用 HTML5 不 
计 其 数 的 那些 超 酷 功能 比如 在 画布 上 画图 或 者 与 Web 服 务 磊 通信 ， 那 就 需要 
JavaScript T 。 如 果 你 有 一 些 浅显 的 编程 经 验 ， 但 对 JavaScript 还 一 知 半 解 ， 附 录 了 B 
(“JavaScript 简 明教 程 ”) 可 以 帮 你 擎 握 一 些 新 情况 。 不 过 ， 要 是 一 昕 到 写 代 人 码 这 几 个 学 ， 
马上 就 像 被 寡 里 爬 进 一 条 蝶 蛇 那样 魂 飞 昕 散 ， 那 要 么 你 根本 不 必 看 本 书 中 的 很 多 章节 了 ， 
要 么 你 得 通过 David Sawyer McFarland 的 JavaScript & jQuery: The Missing Manual (O: 了 Reilly ) 
ZRMK S 

如 果 这 些 必要 条 件 让 你 头 尝 目 有 一 一 好 吧 ， 这 就 是 活 在 Web 设 计 最 前 沿 必 须 付 出 的 代价 。 
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了 中 


编写 HTML5 


编写 HTML5 页 面 可 以 使 用 编写 HTML 页 面 时 使 用 的 软件 。 可 以 是 个 再 简单 不 过 的 文本 编 
辑 占 ， 像 Windows 中 的 记事 本 ， 或 者 Mac 中 的 TextEdit。 目 前 也 有 很 多 设计 工具 (比如 Adobe 
Dreamweaver 和 Microsoft Expression Web ) 提供 了 快速 创建 新 HIMLS 文 档 的 模板 。 不 过 ， 
HTML5 页 面 的 基本 结构 确实 非常 简单 ,任何 网 页 编辑 软件 《即使 不 是 为 HTML5 设 计 的 ) 都 没 
有 问题 。 





注意 当然 啦 ， 不 管 你 上 网 和 编写 网 页 时 用 的 计算 机 是 Windows PC， 还 是 最 新 的 MacBook， 同 
样 也 无 所 谓 ， 因 为 HTML5 与 操作 系统 无 关 。 


查看 HTML5 


每 个 人 都 想 问 一 个 问题 :“ 哪 些 浏览 器 支持 HTML5?” 可 悲 的 是 ， 这 个 问题 没有 明确 的 答案 。 
本 书后 面 会 介绍 ，HTMLS 实 际 上 是 一 组 独立 标准 的 集合 。 有 些 标准 已 经 得 到 了 文 持 ， 而 另 一 些 
标准 几 年 内 (甚至 永远 ) 不 会 得 到 文 持 。 其 他 所 有 标准 则 介 于 这 两 种 情况 之 间 ; 换 句 话说 , HTMLS 
在 某 些 浏览 硕 的 某 些 版 本 中 能 够 运行 。 

下 面 列 出 的 浏览 各 无 需 什么 变通 手段 ， 就 可 以 支持 HTML5 的 绝 大 部 分 。 

口 Internet Explorer 9 及 更 高 版 本 

口 Firefox 3.5 及 更 高 版 本 

口 谷歌 Chrome 8 及 更 高 版 本 

口 Safari 4 及 更 高 版 本 

口 Opera 10.5 及 更 高 版 本 

更 高 版 本 的 支持 程度 更 高 。 也 就 是 说 ，Firefox 5 能 比 Firefox 3.5 更 好 地 支持 HTML5。 

在 避 励 大 家 使 用 新 的 HIML5S 功 能 之 前 ， 本 书 会 清楚 地 说 明 当 前 浏览 锅 对 这 些 功 能 的 文 持 情 
况 。 当 然 ,浏览 硕 版 本 的 变化 相对 比较 快 ， 因 此 在 符 试 某 些 可 能 有 问题 的 功能 之 前 ， 你 目 己 应 该 
先 搜 索 一 下 最 新 的 支持 情况 。 推 荐 一 个 网 站 : http:/caniuse.com， 你 可 以 在 上 面 搜索 某 个 具体 的 
功能 ,然后 它 会 告诉 你 到 的 哪个 浏览 可 的 哪个 版 本 支持 该 功能 。( 1.6 世 还 将 更 详细 地 介绍 这 个 工 
具 的 用 法 。) 

















注意 本 书 会 讨论 那些 已 知 在 茶 些 浏览 器 中 不 能 使 用 的 功能 。 别 懂 ， 如 果 你 只 想 对 HTML5S 有 所 
了 解 ， 而 专注 于 那些 今天 可 以 使 用 的 功能 ， 这 样 不 是 提 好 嘛 。 你 可 以 通过 这 些 功 能 寅 见 
Web 的 未 来 。 


c 
了 路 
UJ 


什么 时 候 可 以 使 用 HTML5 


简短 的 答案 是 “现在 ”。 就 连 遭 人 唾弃 的 Internet Explorer 6， 这 个 问世 长 达 10 年 之 入、 补丁 扬 
补丁 的 家 伙 都 可 以 显示 HTMLS 文 档 。 这 是 因为 创建 HTMLS 标 准时 ， 就 想 让 它 能 涵盖 并 扩展 原来 
的 HTML。 

更 详尽 的 答案 是 “ 视 情况 而 定 ”。 前 面 刚刚 提 到 过 ,HTML5 是 一 组 不 同 标准 的 集合 ， 浏 览 3 
对 这 些 标 准 有 羞 不同 程度 的 支持。 因此, 尽管 现在 任何 Web 开 发 人 员 都 可 以 转 而 编写 HIMLS 文 档 
( Google、YouTube 和 Wikipedia 等 一 些 大 型 网 站 已 经 这 样 做 了 ), 但 要 放心 地 使 用 大 部 分 HTMLS 的 
新 奇 功 能 一 一 至 少 不 必 针对 那些 不 够 开化 的 浏览 疾 采 取 变 通 手 段 ， 念 怕 还 要 青 等 几 年 。 

















注意 茶 项 功能 到 底 属于 哪个 规范 并 不 重要 ， 重 要 的 是 现在 有 没有 浏览 器 支持 它 ( 以 及 尚未 支 
持 它 的 浏览 器 将 来 有 没有 可 能 支持 它 )。 本 书 每 介绍 一 项 新 功能 ， 都 会 告诉 读者 它 来 自 哪 


个 规范 ， 以 及 都 有 哪些 浏览 器 支持 它 。 





作为 有 标准 意识 的 开发 人 员 , 如 介 你 也 对 这 些 标准 什么 时 候 正 陈 颁 布 感 兴趣 。 但 这 个 问题 有 
点 复杂 ， 因 为 设计 HTML5 的 人 遵循 的 理念 有 点 不 合 津 规 。 他 们 经 第 说 ， 正 式 的 标准 中 怎么 说 并 
不 重要 ， 关 键 是 有 没有 浏览 器 文 持 。( 换 名 话说， 只 要 你 觉得 可 行 ， 现 在 就 可 以 采用 任何 你 想 使 
用 的 功能 。) 但 不 少 开 发 人 员 、 大 公司 、 政 府 机 关 以 及 其 他 组 织 ， 通 和 常会 根据 一 种 语言 的 标准 是 
否 正式 颁布 来 判断 是 否 可 以 采用 它 。 

从 技术 上 说 ，HTML5 语 言 现在 还 是 W3C 手 中 的 工作 草案 (working draft )。 对 标准 的 这 种 称 
请 表明 它 已 经 相当 成 熟 了 ,但 在 成 为 候选 推荐 标准 ( candidate recommendation ) 的 时 候 ( 可 能 是 
2012 年 的 某 一 天 )， 仍 然 可 能 会 有 改动 。 而 到 真正 的 推荐 标准 (Tecommendation ) 阶段 ， 因 为 必 
有 顷 有 足够 的 测试 ， 可 能 就 是 很 多 年 之 后 的 事 了 。 但 那 确实 不 怎么 重要 了 ， 因 为 到 了 该 阶段 ， 即 便 
有 改动 也 会 很 少 ， 而 想 要 使 用 HTMLS 的 人 也 早已 经 有 了 自己 的 选择 。 


本 书 内 容 


本 书 把 完整 的 HTML5 教 程 分 为 12 章 ， 具 体内 容 如 下 。 

















第 一 部 分 : 认识 新 语言 
O 第 1 章 (“HTML5 简 介 ” 介绍 HTML 发 展 到 HTML5 的 历程 。 我 们 会 看 一 看 HTML5 文 档 的 
样子 ， 看 看 它 跟 以 前 的 HIML 有 何不 同 ， 另 外 也 看 一 下 浏览 融 的 文 持 情况 。 
口 第 2 章 《构造 网 页 的 新 方式 ”) 讨论 HITMLS 的 语义 元 素 (semantic element )， 也 就 是 一 组 
可 以 为 标记 赋予 含义 的 元 系 。 愉 当地 使 用 这 些 元 系 ， 可 以 让 浏览 瘟 、 屏 从 阅读 带 、Web 
设计 工具 以 及 搜索 引擎 基于 它们 提供 的 额外 信息 更 智能 地 工作 。 
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口 第 3 章 〈“ 有 意义 的 标记 ” 进一步 讨论 语义 的 概念 ， 涉 及 微 数据 (microdata ) 等 标准 。 尽 
管 这 一 章 的 内 容 有 点 偏 理 论 ， 但 透彻 理解 这 个 概念 可 以 给 Web 开 发 人 员 币 来 巨大 的 回报 : 
在 Google 等 搜索 引 警 的 结果 列表 中 显示 更 全 面 、 更 详 信 的 内 容 。 


第 二 部 分 : 制作 新 网 页 


Q 第 4 章 〈“Web 表 单 ”) 探索 HIML5 Web 表 单元 素 的 变化 ,包括 文本 框 、 选 择 列表 、 复 选 
框 和 其 他 用 来 从 访客 那里 收集 信息 的 微 件 (widget )。HTML5 为 捕获 数据 输入 错误 提供 了 
一 些 辅助 和 基本 工具 。 

口 第 5 章 (“音频 与 视频 ”) 讲 一 讲 HTML 最 激动 人 心 的 新 功能 ， 即 文 持 音频 和 视频 播放 。 这 
一 章 将 介绍 如 何 避 免 遭 遇 “Web 视 频 编 解 但 硕大 战 "， 创 建 出 在 所 有 浏览 需 中 都 能 工作 的 
播放 页 面 ， 同 时 还 要 学 习 创 建 自 己 定 制 的 播放 上 需 。 

口 第 6 章 (“基本 Canvas 绘 图 ”) 介绍 名 为 画布 (canvas ) 的 二 维 绘图 表面 。 你 将 会 学 习 怎 样 
在 画布 上 绘制 图 形 、 图 像 、 文 本 ,其 至 还 将 构建 一 个 简单 的 绘图 程序 ( 使 用 一 系列 强大 
的 JavaScript 代 码 )。 

口 第 7 章 (“高 级 Canvas 技 术 ”) 进一步 提升 你 的 “绘画 ”技术 。 这 一 曹 将 会 学 习 投 影 、 花 
哨 的 模式 ， 以 及 可 点 击 的 交互 图 形 和 动画 等 更 加 邻 人 神往 的 Canvas 技 术 。 

口 第 8 章 〈“ 使 用 CSS3”) 将 介绍 最 新 版 本 的 CSS3 标 准 ,， 它 与 HTIMLS5 可 谓 绝 配 。 我 们 将 学 习 
如 何 应 用 新 奇 的 字体 让 文本 变 得 活泼 可 爱 ， 如 何 让 页 面 适应 不 同 的 移动 设备 ， 以 及 利用 
变换 添加 吸引 人 的 效 末 。 


第 三 部 分 : HER AA Webi H 


口 第 9 章 (“数据 存储 ”) 讨论 在 访客 计算 机 中 保存 小 段 数据 的 新 Web 存 储 功 能 。( 非常 像 
cookie 的 超级 简捷 版 。) 这 一 章 还 将 介绍 如 何在 网 页 而 不 是 在 Web 服 务 硕 中 , 使 用 JavaScript 
代码 处 理 用 户 选 择 的 文件 。 

口 第 10 章 (“离线 应 用 ”) 探索 新 的 HIMLS 绥 存 功 能 ， 这 个 功能 可 以 实现 在 断 网 的 情况 下 仍 
然 能 够 通过 浏览 磊 查 看 网 页 。 

口 第 11 章 (“与 Web 服 务 器 通信 ”) 将 把 目光 投 回 与 Web 服 务 融通 信 这 个 主题 上 。 为 此 ， 将 
介绍 久负盛名 的 XMLHttpRequest 对 象 ，JavaScript 通 过 它 可 以 联系 Web 服 务 器 并 请 求 信 息 。 
然后 再 讨论 两 个 比较 新 的 功能 : 服务 天 端 事件 和 【 影 啊 更 加 次 远 但 还 需要 完善 的 ) Web 
ABC. 

口 28123: (CC mBREBJJavaScripBx R) 介绍 了 解决 现代 Web 应 用 开发 难题 的 三 个 新 功能 。 第 
一 是 可 以 确定 访客 位 置 的 地 理 定位 ; 第 二 是 在 后 台 执 行 复杂 任务 的 Web Worker; 第 三 是 
能 够 同步 网 页 URL 到 当前 状态 的 新 的 浏览 各 历 史 功 能 。 

最 后 有 两 个 附录 , 可 以 为 你 掌握 HTML5 补 习 一 些 其 础 知识 。 附录 A 是 对 CSS 的 一 个 简要 介绍 ， 

附录 B 则 会 价 单 地 介绍 JavaScript。 
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在 线 资源 


作为 Missing Manual 从 书 的 读者 ， 你 所 得 到 的 不 仅仅 是 一 本 书 。 在 网 上 ， 你 还 可 以 找到 示例 
文件 以 及 技巧 、 文 昔 ， 甚 至 是 一 两 段 视频 。 你 可 以 跟 Missing Manual 团 队 交 流 ， 告 诉 我 们 你 喜欢 
(或 讨厌 ) 本 书 的 哪 一 方面 。 请 访问 www.missingmanuals.com， 或 百 接 阅 读 后 面 的 某 一 小 和 。 











Missing CD 


本 书 没 有 附 齐 光盘 ,但 这 对 学 习 本 书 一 点 影响 都 没有 。 谈 者 可 以 访问 本 书 的 Missing CD 页 面 
http://missingmanuals.com/cds/html5mm, ， 下 载 本 书 讨 论 和 展示 的 网 页 示例 ， 这 样 你 就 不 必 目 己 动 
手 敲 那些 长 长 的 网 页 地 址 了 。 这 个 页 面 中 列 出 了 全 书 每 一 草 提 到 的 网 站 的 链接 。 











提示 假如 你 想 找 某 个 特定 的 例子 ， 我 教 给 你 一 个 好 办 法 一 一 看 插图 。 在 插图 中 ， 文 件 名 一 般 
都 会 出 现在 浏览 器 地 址 栏 的 末尾 。 比 如 ， 看 到 文件 路 径 CNHTMLSNChapter0l\SuperSimple 
HTMLS.html ( 图 1-1 )， 就 知道 对 应 的 示例 文件 名 叫 SuperSimpleHTML5S.html。 


V dir vd a 


还 有 另 一 种 使 用 本 书 示 例 的 方法 ， 就 是 访问 在 线 示 例 网 站 : www.prosetech.com/html5/, 在 这 
个 网 站 上 可 以 看 到 本 书 的 每 一 个 示例 ， 并 耻 接 在 浏览 瘟 中 运行 它们 。 因 为 HTML5 的 茶 些 功能 需 
要 一 个 真正 的 Web 服 务 顺 ， 所 以 直接 使 用 这 个 网 站 其 实 可 以 省 点 心 。( 如果 你 直接 从 计算 机 人 硬盘 
上 运行 网 页 ， 这 些 功 能 可 能 会 导致 一 些 怪异 的 现象 ， 或 者 完全 不 能 用 。) 而 使 用 这 个 网 站 ， 就 可 
以 先 看 到 某 个 例子 的 运行 结果 ， 然 后 再 下 载 该 页 面 并 动手 尝试 。 











注意 别 担 心 自己 不 知道 哪些 HTML5 功 能 需要 Web 服 务 器 ， 到 时 候 本 书 会 给 出 提示 的 。 


注册 

如 有 果 你 在 oreilly.com 注 册 了 这 本 书 , 可 能 会 享受 到 一 些 优 惠 ， 比 如 购买 Creatizg a Website: The 
Missing Manual 的 新 版 时 可 以 打 个 折 。 注 册 其 实 只 需 点 儿 次 鼠标 。 在 浏览 各 地 址 栏 里 输入 
http://tinyurl.com/registerbook， 下 接 就 可 以 跳 到 注册 (Registration ) 页 面 。 
有 反馈 


有 问题 要 问 ? 需要 更 多 信息 ” 想 给 我 们 写 个 书评 ? 在 反馈 (Feedback) 页 面 上 ,你 可 以 癌 专 
家 请 教 上 自己 看 书 时 碰 到 的 问题 , 也 可 以 分 享 自己 对 Missing Manual 从 书 的 看 法 , 其 至 找到 一 些 志 司 











Cn 
a 
了 中 





道 合 的 朋友 , 听 听 他 们 谈论 在 做 网 站 过 程 中 的 一 些 体会 ,要 想 发 言 ,可 访问 www.missingmanuals.com/ 
feedback。 
勘误 

为 了 尽 可 能 保证 本 书 切 合 实 际 、 谁 确 无 误 ， 每 次 重印 我 们 都 会 纠正 一 些 确认 的 勘误 。 这 些 勘 


误 信 息 也 会 在 本 书 网 站 上 发 布 出 来 ， 以 便 读者 更 正 自 己 手 里 这 本 书 的 错误 。 要 提交 或 查看 勘误 ， 
请 访问 http://tinyurl.com/3q56k7v。 














简报 


订阅 我 们 免费 的 电子 邮件 简报 可 以 随时 了 解 Missing Manual 从 书 的 新 动 回 。 这 样 可 以 方便 你 与 
作者 、 编 辑 联系 , 并 能 看 到 人 免费 视频 和 图 书 样 草 等。 要 订阅 ,请 访问 http://tinyurl.com/MMnewsletter。 








Safari? Books Online 


Safari^ Books Online 是 一 个 按 需 阅读 的 数字 图 书馆 ， 有 7500 种 技术 图 
Sa fa FL 书 和 视频 可 供 搜索 。 
Eee 通过 订阅 ， 可 以 在 此 阅读 所 有 图 书 ， 观 看 任何 视频 。 其 至 可 以 在 新 
书 印刷 之 前 阅读 到 它们 。 可 以 复制 精 巾 示例 代码 ， 收藏 喜欢 的 内 容 ， 下 载 整 章 内 容 ， 为 关键 部 分 
创建 书签 ， 添 加 评注 ， 打 印 页 面 ， 以 及 享受 其 他 众多 省 时 省 力 的 阅读 体验 。 
O'Reilly Media 已 经 将 本 书 上 传 到 Safari Books Online。 访 问 http://my.safaribooksonline.com 并 
免费 注册 ， 可 以 看 到 本 书 及 O?Reilly 和 其 他 出 版 社 图 书 的 完整 电子 版 。 
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HTML5 简 介 


a 果 说 HTML 是 一 部 电影 ， 那 HTMLS 就 是 一 次 大 转折 。 
HTML 本 来 是 不 会 活 过 21 世 纪 的 。 官方 Web 标 准 组 织 W3C1998 年 对 HTML 就 已 经 撒手 不 
管 了 。W3C 把 未 来 都 寄托 在 XHTML ， 这 个 更 具 现 代 特 色 的 后 续 标 准 身 上 。 是 一 群 被 剥夺 了 话语 
权 的 人 ， 让 HTML 起 死 回 生 并 为 本 书 将 要 探讨 的 功能 芮 定 了 基础 。 

本 章 , 你 会 了 解 到 HTML 死 亡 的 原因 ,以 及 它 又 是 怎样 复活 的 ; 了 解 HTMLS 的 设计 原理 与 功 
能 ; 还 将 认识 到 恼人 的 浏览 硕 文 持 问 题 。 在 这 一 曹 ， 你 将 第 一 次 看 到 和 善 的 HIMLS 文 档 一 一 既 
包括 其 最 简单 的 形式 , 也 包括 一 个 更 具 实用 性 的 模板 。 在 这 个 模板 基础 上 , 可 以 构建 出 任何 网 站 。 




















1.4 HTML5 的 故事 


大 家 都 知道 , HTML 是 用 来 编写 网 页 的 语言 。HTML 的 基本 思想 ( 使 用 元 素 为 内 容 添 加 结构 ) 
从 Web 诞 生 以 来 就 没有 变 过 。 事 实 上 ， 即 使 是 最 陈旧 的 网 页 ， 在 最 新 的 浏览 需 〈 包 括 Firefox、 
Chrome 等 那 时 候 还 没有 的 浏览 需 ) 中 仍然 可 以 得 到 完美 的 呈现 。 

年 长 和 成 功 也 会 市 来 相当 大 的 风险 , 那 就 是 所 有 人 都 想 取代 你 11998 年 ,W3C 停 止 了 对 HTML 
的 维护 ， 作 为 对 它 的 改进 ， 开 始 制定 一 个 基于 XML 的 后 续 版 本 一 一 XHTML 1.0。 


1.1.1 XHTML 1.0: 更 严格 的 标准 


XHTML 与 HIML 的 语法 绝 大 部 分 都 是 相同 的 ， 只 不 过 要 求 更 严格 。 很 多 以 前 不 够 严谨 的 
HTML 标 记 ， 在 XHTML 中 都 变 成 了 不 能 接受 的 。 

例如 ， 假 设 你 想 把 标题 中 的 最 后 一 个 词 标记 为 斜体 ， 本 来 应 该 写 : 

<h1>The Life of a «i»Duck«/i»«/h1» 

但 你 一 不 小 心 放 错 了 最 后 两 个 标签 的 位 置 : 

<h1>The Life of a <i>Duck</h1></i> 

浏览 硕 在 遇 到 这 个 稍微 有 点 乱 的 标记 之 后 , 它 知 道 你 想 干什么 。 于 是 ,， 它 就 把 最 后 一 个 词 变 
成 竹 体 ， 而 且 不 会 抱怨 你 。 可 是 ， 标 签 不 匹配 违反 了 XHTML 的 规定 。 如 果 把 页 面 复 制 到 一 个 
XHTML 验 证 各 中 (或 使 用 Dreamweaver 之 类 的 网 页 设计 工具 时 )， 你 就 会 看 到 一 个 警告 ， 告 诉 你 
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哪里 有 错误 。 从 Web 设 计 的 角度 看 ， 这 种 提示 很 有 用 ， 因 为 你 可 以 发 现 微 小 的 错误 ， 这 些 错误 会 
导致 在 不 同 浏览 吉 中 显示 结果 不 一 致 ， 这 些 错 误 在 编辑 和 增强 页 面 时 还 可 能 导致 更 严重 的 问题 。 

最 初 ，XHTML 获 得 了 成 功 。 由 于 厌倦 了 浏览 亏 的 古怪 行为 和 怎么 写 都 可 以 通过 的 不 正常 状 
态 ， 专 业 的 Web 开 发 人 员 对 XHTML 还 是 非常 拥护 的 。 后 来 ， XHTML 标准 又 强迫 他 们 养 成 更 好 的 
习惯 ,同时 放弃 HTML 中 那些 半生 不 熟 的 格式 化 功能 。 可 是 , 与 XML 工 具 协 同 ,降低 自动 化 程序 
处 理 页 面 的 难度 , 方便 地 移植 到 移动 平台 , 以 及 XHTML 语言 自身 的 可 扩展 性 等 这 些 预 期 的 好 处 ， 
从 来 没有 在 XHTML 号 上 实现 过 。 

即便 如 此 ，XHTML 仍 然 成 为 最 严肃 的 Web 设 计 师 所 遵循 的 标准 。 尽 管 看 起 来 所 有 人 都 挺 满 
意 的 ， 但 实际 上 却 存 在 一 个 潜 规 则 : 浏览 吉 虽 然 理解 XHTML 标记 ， 但 却 不 会 严格 地 按照 标准 执 
行 错误 检查 。 这 就 意味 着 页 面 仍然 可 以 不 遵守 XHTML 规则， 浏览 回 则 视而不见 。 事 实 上 ， 没 有 
什么 可 以 阻止 Web 开 发 人 员 把 乱糟糟 的 标记 和 陈旧 的 HTML 内 容 混 在 一 起 ， 然 后 还 说 这 是 
XHTML 页 面 。 世 界 上 根本 就 没有 一 个 浏览 规 站 出 来 反对 这 种 行为 。 这 种 情况 让 那些 负责 XHTML 
标准 的 人 深 感 不 安 。 



































1.1.2 XHTML 2: 意 想 不 到 的 失败 


解决 方案 就 是 XHTML 2。 这 个 新 版 本 规定 了 严格 的 错误 处 理 规则 ， 强 制 要求 浏 览 需 拒 绝 无 
效 的 XHTML 2 页 面 ， 同 时 也 据 弃 了 很 多 从 HTMIL 沿袭 下 来 的 怪异 行为 和 编码 惯例 。 比 如 ， 以 编号 
方式 (xch1> «h2», <h3> fE ) 区 分 标题 的 方法 被 一 个 新 的 ch> 元 系 取 代 ， 这 个 元 系 的 重要 性 取决 于 
它 在 网 页 中 的 位 置 。 类 似 地 ， 由 于 允许 Web 开 发 人 员 将 任何 元 素 转换 为 链接 ，《a> 元 素 的 地 位 一 
洛 千 丈 。 而 <img> 元 素 因为 增加 了 一 种 提供 蔡 代 内 容 的 新 方式 ， 也 丧失 了 原 有 的 alt 属 性 。 

这 些 变化 是 XHTML 2 的 典型 特征 。 从 理论 上 看 ， 这 些 改变 更 优美 也 更 合理 。 而 从 实践 角度 
说 ， 这 就 要 求 每 个 人 都 必须 改变 以 前 编写 网 页 的 方式 (已 经 存在 的 网 页 必须 更 新 )， 但 付出 这 些 
代价 却 没 有 增加 任何 新 功能 ， 让 这 一 切 变 得 似乎 没有 了 价值 。 与 此 同时 ，XHTML 2 还 宣布 了 几 
个 众所周知 的 元 素 作 废 ， 比 如 xb> (用 于 加 粗 文 本 )、<i>( 变 和 斜体 ) 和 <iframe>( 用 于 在 网 页 中 骸 
入 另 一 个 网 页 )， 但 这 些 元 素 在 Web 设 计 人 员 中 仍然 深 得 人 心 。 

但 最 糟糕 的 ， 还 是 慢 得 要 死 的 制定 过 程 。XHTML 2 的 制定 过 程 整 整 抑 了 5 年 才 完成 ， 开 发 人 
员 的 激情 早 都 荡然 无 存 了 。 

















1.1.3 HTML5: 起 死 回 生 


几乎 与 此 同时 (从 2004 年 开始 )， 有 一 和 群 人 从 另外 一 个 角度 展望 Web 的 未 来 。 他 们 想 的 不 是 
从 HTML 中 挑 出 各 式 各 样 的 毛病 (或 者 干脆 说 是 主张 “不 纯粹 的 哲学 观 ”)， 而 是 它 还 缺少 什么 
Web 开 发 人 员 编 码 时 急需 的 功能 。 

归根 结 底 ，HTML 最 早 是 作为 显示 文档 的 手段 出 现 的 。 辅 之 以 JavaScript， 它 其 实 已 经 演变 成 
了 一 个 系统 ,可 以 开发 搜索 引擎 、 网 上 商店 、 在 线 地 图 、 邮 件 阅 读 器 以 及 其 他 各 种 能 够 想象 得 到 
的 Web 应 用 。 虽 然 设 计 巧 妙 的 Web 应 用 可 以 实现 很 多 令 人 赞叹 的 功能 ， 但 开发 这 样 的 应 用 远 非 易 
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事 。 多 数 都 得 手动 编写 大 量 JavaScript 代 码 6E H]I$— AEA T JavaScript TRE, JEE 
Web 服 务 硕 上 运行 的 服务 硕 端 Web 应 用 。 要 让 所 有 这 些 方面 在 不 同 的 浏览 硕 中 都 能 紧密 配合 不 出 
差 铺 是 一 个 挑战 。 即 使 是 顾 得 了 挑战 , 你 还 要 记 住 把 这 些 方面 联系 到 一 起 的 那些 错综复杂 的 细 古 。 

开发 浏览 硕 的 人 对 这 种 情况 特别 关注 。 于 是 , X H Opera Software ( JF Operaiil V4 zi HJ íi] ) 
和 Mozilla Foundation ( JF Firefoxiul Vi a HJ2H2H. ) 的 一 些 具有 超前 意识 的 人 纷纷 建言 ， 希望 
XHTML 能 加 入 一 些 对 开发 人 员 更 有 用 的 功能 。 但 他 们 的 建议 并 没有 被 采纳 , 结果 Opera、Mozilla 
和 Apple 自 发 地 组 建 了 WHATWG ( Web Hypertext Application Technology Working Group，Web 超 
文本 应 用 技术 工作 组 )， 致 力 于 寻找 新 的 解决 方案 。 

WHATWG 不 想 取 代 HTML， 而 是 考虑 以 无 障碍 、 向 后 羔 容 的 方式 去 扩展 它 。 这 个 组 织 最 早 
的 工作 成 果 包 含 两 个 补充 规范 : Web Application 1.0 和 Web Forms 2.0。 而 HTML5 正 是 在 这 两 个 标 
准 的 基础 上 发 展 起 来 的 。 



































注意 HTML5 中 的 数字 5 表示 这 个 标准 是 HTML 的 后 续 版 本 (在 XHTML 之 前 ，HTML 的 版 本 号 
是 4.01 )。 当 然 ， 这 个 解释 也 不 完全 正确 ， 因 为 HTML5 支 持 自 HTML 4.01 发 布 以 来 的 10 年 
间 出 现在 网 页 中 的 所 有 新 东西 ， 包 括 严 格 的 XHTML 风 格 的 语法 ( 只 要 你 愿意 就 可 以 用 ) 
和 大 量 的 JavaScript 创 新 。 但 不 管 怎 么 说 ， 这 个 名 字 仍 然 清楚 地 表明 : HTMLS 虽 然 支持 
XHTML 的 规定 ， 但 它 要 求 的 则 是 HTML 的 规则 。 





20074E, WHATWG 阵 营 获 得 了 空前 的 支持 。 痛定思痛 之 后 ,， W3C 宣 布 解散 负责 制定 XHTML 
2 标准 的 工作 组 ,并 开始 致力 于 将 HTML5 改 造 为 正式 的 标准 。 就 这 样 , 最 初 的 HTML5 被 分 割 成 多 
个 容易 管理 的 模块 ， 而 本 来 统称 为 HIMLS 的 很 多 功能 分 散 到 了 几 个 独立 的 标准 中 详 见 后 面 的 
附注 栏 )。 


提示  W3C'ÉEZHTMLSAR/ 89 5E X www.w3.org/TR/html$ 。 


HTML5 包 含 哪些 功能 
如 果 有 人 说 某 某 浏览 器 “支持 ”HTMLS， 其 实 根本 没有 这 回 事 。 实 际 上 ， 任 何 浏览 器 支 
持 的 都 是 一 个 逐步 扩展 的 HIMLS 相 关 功 能 的 子 集 。 这 个 结果 既 好 又 不 好 。 说 好 ， 是 因为 浏览 
器 可 以 迅速 实现 HTML5 中 业已 成 熟 的 部 分 ， 而 任 由 其 他 部 分 继续 发 展 。 说 不 好 ， 则 是 因为 编 
写 网 页 的 人 必须 检查 浏览 器 是 否 支持 自己 想 用 的 功能 。( 本 书 将 会 介绍 一 些 检测 浏览 器 的 技 
术 ， 有 的 很 麻烦 ， 有 的 则 没有 那么 麻烦 。) 
以 下 列 出 了 HTML5 涵 盖 的 一 些 主要 功能 。 
口 HTML5 核 心 。 这 一 部 分 主要 由 W3C 官 方 的 规范 组 成 ， 涉 及 新 的 语义 元 素 ( 第 2 章 和 第 3 
草 )、 新 的 增强 的 Web 表 单 微 件 ( 第 4 草 )、 音频 和 视频 支持 (第 $ 齐 ) 以 及 通过 JavaScript 
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绘图 的 Canvas ( 第 6 章 和 第 7 章 )。 这 一 部 分 的 功能 大 多 数 都 得 到 了 浏览 器 很 好 的 支持 。 
口 曾经 属于 HTML5 的 功能 。 这 一 部 分 源 自 WHATWG 最 初 制定 的 HTMLS 规 范 ， 其 中 大 多 
数 功能 需要 JavaScript 且 支持 富 Web 应 用 开发 。 最 重要 的 包括 本 地 数据 存储 (第 9 章 )、 离 
线 应 用 (第 10 革 ) 和 消息 传递 〈( 第 11 齐 )， 但 本 书 要 介绍 的 内 容 还 不 止 这 些 。 
口 有 时 候 会 被 称 为 HTML5 的 功能 。 这 些 通常 是 指 下 一 代 功 能 ， 虽 然 它 们 从 未 进入 过 
HTML5 标 准 , 但 人 们 还 是 经 常会 把 它们 与 HTML5 相 提 并 论 。 这 部 分 包括 CSS3 ( 第 8 章 ) 
和 地 理 定位 ( 第 12 章 )。 





令 人 不 解 的 是 , 导致 标准 这 么 令 人 困惑 的 不 仅仅 是 那些 不 异 技 术 的 省 理 者 和 技术 作者 , 其 至 
连 W3C 都 在 有 意 无 意 地 模糊 “真正 的 ”HTML5 (已 有 标准 ) 和 “宣传 用 ”版 本 (包括 所 有 新 冒 
头 的 技术 和 其 他 乱七八糟 的 东西 ) 之 间 的 界限 。 举 个 例子 ， 官方 W3C 标 志 网 站 ( www.w3.org/ 
html/logo ) 鼓励 人 们 生成 用 于 宣传 CSS3 和 SVG 的 HTMLS 标 志 ， 而 前 两 个 标准 在 HITML5S 出 现 之 前 
就 已 经 在 开发 了 。 











1.1.4 HTML: 活着 的 语言 


从 W3C 到 WHATWG， 然 后 再 回 到 W3C， 这 个 过 程 导 致 了 相当 罕见 的 转换 与 磨合 。 从 技术 上 
说 ， 什 么 是 或 什么 不 是 HTMLS 由 W3C 说 了 算 。 但 与 此 同时 ，WHATWG 一 直 在 设计 未 来 的 HTML 
功能 。 直到 最 近 , 他 们 才 不 再 把 自己 的 工作 成 果 称 为 HTMLS , 而 是 简单 地 称 为 HTML, 表明 HTML 
还 会 继续 活 下 去 。 

因为 HTML 是 一 门 活着 的 语言 ， 所 以 HITML 页面 永 远 不 会 作废 ， 也 不 会 无 法 阅读 。HTML 页 
面 永远 不 需要 版 本 号 〈 甚 至 连 文档 类 型 声明 都 不 需要 )，Web 开 发 人 员 也 永远 不 需要 为 了 让 它 能 
在 新 浏览 句 中 运行 ， 而 把 自己 的 标记 从 一 个 版 本 “升级 ”到 另 一 个 版 本 。 

因为 HTML 是 一 门 活着 的 语言 ， 所 以 任何 时 候 在 HTML 标 准 中 都 可 能 增添 新 功能 ( 和 新 元 
素 )。 是 否 使 用 这 些 功 能 取决 编写 网 页 的 人 ， 而 是 否 支 持 这 些 功 能 则 取决 开发 浏览 絮 的 人 。 但 所 
有 功能 都 不 再 与 特定 的 版 本 号 紧密 相关 。 

Web 开 发 人 员 听 到 这 么 说 ,第 一 反应 通常 是 大 惑 不 解 。 毕 葛 ， 谁 希望 浏览 器 对 标准 的 支持 各 
不 相同 , 而 谁 又 愿意 在 选择 功能 时 只 和 赁 它们 将 来 会 得 到 文 持 这 个 可 能 性 呢 ? 然而 , 冷静 下 来 想 一 
想 ， 大 多 数 Web 开 发 人 员 还 是 不 情愿 地 接受 了 这 个 现实 : 不 管 是 好 是 坏 ， 这 不 正 是 今天 浏览 需 的 
现状 咏 ， 而 且 从 Web 诞 生 的 那 一 天 起 始终 都 是 这 样 的 。 

前 面 我 们 解释 过 , 今天 的 浏览 器 乐于 接受 支持 一 大 堆 乱 七 八 糟 的 功能 这 个 现实 。 你 可 以 在 激 
进 的 XHTML 页 面 中 加 上 像 cmarquee> 元 素 ( 用 于 创建 深 动 文本 , 已 废弃 ) 这 样 被 认为 是 倒 行 逆 施 
的 东西 ， 任 何 浏览 右 都 不 会 反对 。 类 似 地 ， 即 便 是 在 对 最 老 标 准 的 支持 方面 ， 有些 浏 览 需 也 仍然 
存在 一 些 广为人知 的 遗漏 。 比 如 ， 有 些 浏览 右 开 发 商 在 完整 地 支持 CSS2 之 前 就 开始 实现 CSS3， 
结果 很 多 CSS2 特 性 后 来 都 没有 实现 。 唯 一 的 区 别 就 是 HTML5 现 在 把 “活着 的 语言 ” 变 成 了 常规 
状态 。 同 样 ， 就 像 我 们 正在 用 新 的 、 创 新 性 的 一 章 来 介绍 HTMIL 一 样 ， 它 经 过 了 一 番 轮 回 终 于 又 
恢复 了 它 的 本 来 面貌 ， 这 不 也 正 是 一 个 天 大 的 讽刺 吗 ? 
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提示 有 要 了 解 当 下 正在 发 展 中 的 HIML， 包 括 我 们 称 为 HIMLS 的 部 分 和 少量 但 始终 在 变化 的 、 
新 的 、 还 没有 得 到 支持 的 功能 ， 请 访问 http://whatwg.org/html。 要 关注 有 关 HTML 但 不 那 
么 官方 的 新 闻 ， 可 以 访问 WHATWG 的 博客 http://blog.whatwg.org。 


1.2 HTML5 的 三 个 主要 原理 


此 时 此 刻 ， 有 的 读者 可 能 已 经 按 探 不 住 了 ， 巡 不 急 得 地 想 知 道真 正 的 HTML5 页 面 到 底 是 什 
么 样子 的 。 不 过 在 此 之 前 ， 有 必要 和 多 了 解 一 下 制定 HIML5 规 范 的 那些 人 当时 是 怎么 想 的 。 只 有 
理解 了 这 门 培 言 背后 的 设计 思想 , 才能 真正 明日 本 书 将 要 介绍 的 那些 古怪 的 行为 、 复 森 的 现象 和 
偶尔 会 让 人 抓 耳 找 腮 的 问题 。 














1.2.1 不 破坏 Web 


“不 破坏 Web” 的 意思 是 标准 不 应 该 引入 导致 已 有 的 网 页 无 法 工作 的 改变 。 这 种 事 极 少 发 生 。 

“不 破坏 Web” 还 意味 着 标准 不 应 该 出 人 意料 地 更 改 规则 ， 不 能 认定 今天 还 完美 无 缺 的 网 页 
到 了 明天 就 要 作废 ( 即使 可 以 使 用 也 要 作废 )。 比 如 ，XHTML 2 破坏 了 Web， 因 为 它 要 求 马上 就 
显著 改变 以 前 编写 网 页 的 方式 。 没 错 , 原来 的 网 页 还 能 用 , 但 那 都 是 浏览 需 文 持 向 后 兼容 的 功劳 。 
如 果 你 为 将 来 打算 ， 想 按照 最 新 标准 重 写 网 页 ， 就 得 浪费 数 不 清 的 时 间 去 纠正 XHTML 2 已 经 明 
令 禁 目的 “错误 ”。 

HTML5 的 立场 不 一 样 。HTML5 之 前 可 以 接受 的 ,在 HTML5 中 照样 可 以 接受 。 事实 也 是 ， 符 
合 HTML 4.01 标 准 的 网 页 在 HTML5 中 仍然 是 有 效 的 。 




















注意 与 以 往 的 标准 不 同 ，HTML5 不 仅 向 浏览 器 开发 商 明 示 该 支持 什么 ,还 利用 文档 说 明 并 规 
范 化 了 它们 原来 的 处 理 方 式 。 由 于 HTML5 标 准 描 述 的 都 是 事实 ,而 不 是 抛 出 一 堆 理想 的 
规则 了 事 ， 因 此 它 有 望 成 为 有 史 以 来 受 支 持 程度 最 高 的 Web 标 准 。 


HTML5 怎 么 处 理 废弃 元 素 
因为 HTML5 支 持 所 有 HTML, 所 以 它 支持 很 多 被 认为 是 废弃 的 功能 。 其 中 包括 像 <font> 
这 样 的 格式 化 元 素 ， 被 人 厌恶 的 <blink> 和 <marquee> 等 特效 元 素 ， 以 及 难 对 付 的 HTML 框架 
这 种 无 所 不 包 的 开放 性 是 令 很 多 HTML5 新 手感 到 困惑 的 一 个 原因 。 一 方面 ，HITMLS 无 论 
如 何 还 是 应 该 禁止 使 用 这 些 过 时 的 元 素 ， 因 为 它们 已 经 很 多 年 没有 出 现在 官方 规范 里 了 。 另 一 


方面 ， 现 代 浏 览 器 依然 悄 无 声息 地 支持 着 这 些 元 素 ， 而 HIMLS 就 是 要 体现 浏览 器 真实 的 处 理 


方式 。 那 么 这 个 标准 到 底 要 怎么 做 呢 ? 
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为 解决 这 个 问题 ，HTMLS 规 范 包含 两 个 独立 的 部 分 。 第 一 部 分 (也 是 本 书 将 要 介绍 的 ) 
面向 Web 开 发 人 员 ， 要 求 握 弃 过 去 的 那些 坏 习 惯 和 被 废弃 的 元 素 。 通 过 使 用 HTMLS 验 证 器 可 
以 确保 遵循 HTML5 标 准 的 这 一 部 分 。 

第 二 部 分 ， 也 是 HTML5 规 范 中 篇 幅 更 长 的 部 分 ， 针 对 的 是 浏览 器 开发 商 。 它 们 需要 支持 
HTML 中 存在 的 一 切 ， 以 做 到 向 后 兼容 。 理想 情况 下 ，HTML5 标 准 中 应 该 包含 足够 的 信息 ， 
让 人 人 能够 握 以 从 关 开 发 一 个 新 浏览 器 , 而 且 无 论 是 处 理 新 的 还 是 旧 的 标记 , 该 浏览 器 都 应 该 能 
够 与 今天 的 现代 浏览 器 完全 兼容 。 这 一 部 分 标准 就 是 告诉 浏览 器 如 何 处 理 那些 官方 不 鼓励 使 用 
但 仍然 必须 支持 的 废弃 元 素 。 

有 时 候 ，HTMLS 规 范 也 会 对 浏览 器 应 如 何 处 理 各 种 错误 ( 如 漏 写 或 错 配 了 标签 ) 作出 正 
式 规定 。 这 一 点 其 实 很 重要 ,因为 它 可 以 确保 有 缺陷 的 页 面 在 不 同 浏览 器 中 都 能 够 得 到 同样 的 
处 理 ， 其 至 都 规定 了 将 页 面 映射 为 DOM (Document Object Model， 文 档 对 象 模 型 ， 即 内 存 中 
表现 页 面 元 素 的 对 象 树 ， 供 JavaScript 使 用 ) 这 么 细节 的 问题 。 为 了 写 出 标准 的 这 个 宛 长 又 乏 
味 的 部 分 ，HTML5 的 制定 者 们 在 现代 浏览 器 上 进行 了 彻底 的 测试 ， 以 便 发 现 还 没有 作出 规定 
的 错误 处 理 行为 。 然 后 再 把 该 行为 加 到 标准 中 。 


1.2.2 ”修补 牛 蹄 子路 


牛 蹄 子路 ( cowpath ) 指 的 是 高 低 不 平 但 使 用 频率 很 高 的 路 ， 通 过 它 可 以 从 一 个 地 方 到 达 另 
一 个 地 方 。 之 所 以 存在 牛 蹄 子路 ， 就 是 因为 有 人 走 。 也 许 这 条 路 走 起 来 不 是 最 舒服 的 ， 但 茶 种 程 
度 上 却 是 最 实际 的 解决 之 道 。 

HTML5S 把 标准 化 这 些 非 和 家 方 〈 但 广泛 应 用 ) 的 技术 作为 一 个 目标 。 或 许 与 利用 新 方法 修 的 
高 速 公 路 相 比 ， 午 蹄 子路 没有 那么 平坦 宽 益 ,但 它 最 得 胜利 的 机 会 更 大 。 因 为 对 于 一 般 的 网 站 设 
计 人 员 来 说 , 切换 到 新 技术 可 能 会 超出 他 们 的 能 力 范 围 , 或 者 他 们 根本 就 没有 兴趣 。 更 大 的 问题 
在 于 ， 使 用 旧 浏 览 硕 的 访客 无 法 因为 新 技术 而 受益 。XHTML 2 企图 把 人 们 赶 出 牛 蹄 子路 ， 结 
败 得 非常 惨 。 














注意 ”修补 牛 蹄 子路 有 一 个 明显 的 好 处 : 它 使 用 已 经 得 到 浏览 器 某 种 程度 支持 的 既定 技术 。 假 
设 有 一 种 只 被 七 成 浏览 器 支持 的 漂亮 的 新 技术 ， 还 有 一 种 任何 情况 都 能 工作 但 不 那么 雅 
观 的 hack，Web 开 发 人 员 始 终 都 会 选择 不 那么 雅 观 的 hack， 因 为 它 适 合 更 多 的 用 户 。 


“修补 牛 蹄 子路 ”的 方法 也 需要 折 中 。 有 时 候 ， 这 意味 着 要 包容 那些 得 到 广泛 支持 但 设计 却 
很 拙劣 的 功能 。HTML5 的 拖 放 就 是 一 个 例子 (参见 9.3.6 节 )， 这 个 功能 完全 以 微软 为 IE5 设 计 的 
拖 放 机 制 为 基础 。 尽 管 这 个 拖 放 功能 目前 得 到 了 所 有 浏览 器 的 支持 , 但 由 于 使 用 起 来 不 灵活 而 且 
过 度 复杂 ,因此 几乎 没有 人 不 反感 它 。 为 此 , 不 少 的 Web 设 计 人 员 也 抱怨 “HTML5 不 仅 鼓励 不 良 
行为 ， 而 且 还 给 它们 正名 。” 
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1.43 ”实用 至 上 


PCT BARRE: 改变 应 该 以 实用 为 目的 。 改 变 得 越 多 ,代价 也 就 越 大 。Web 开 发 人 员 可 能 
更 希望 标准 是 精心 设计 、 始 终 如 一 ,而 且 是 没有 怪异 行为 的 。 但 这 个 理由 还 不 足以 改变 一 门 已 经 
用 来 创建 了 数 十 亿 网 页 的 语言 。 当 然 , 到 底 需 要 不 需要 改变 还 是 要 由 某 个 人 根据 利害 来 评判 。 而 
现 有 网 页 都 是 怎么 做 的 或 者 说 试图 怎么 去 做 ， 可 以 作为 很 好 的 判断 依据 。 

例如 ，( 在 本 书写 作 时 ) YouTube 是 世界 上 第 三 受 欢迎 的 网 站 ,但 由 于 HTML5 之 前 的 HTML 
不 真正 支持 视频 ，YouTube 一 直 都 得 依赖 Flash 插 件 。 使 用 Flash 插 件 没什么 问题 ， 因 为 只 要 是 能 
网 的 计算 机 ， 基 本 上 都 会 安 痛 这 个 插件 。 不 过 也 有 例外 ， 比 如 某 些 公司 会 锁定 它们 的 计算 机 ， 不 
允许 安装 Flash ,另外 苹果 的 设备 ( 如 iPhone 和 iPad ) 也 不 支持 Flash。 不 管 有 多 少 计算 机 安装 了 Flash， 
扩展 HTML 标 准 ， 使 其 直接 支持 人 们 今天 使 用 Web 的 一 种 最 基本 方式 一 一 看 视频 ， 址 良 置 疑 是 有 
必要 的 。 

而 HIML5 中 添加 了 更 多 交互 功能 的 育 后 也 有 着 同样 的 动机 。 像 拖 放 、 可 编辑 的 HIML 内容、 
在 Canvas 中 绘制 二 维 图 形 等 ,都 是 同样 的 情况 。 这 些 功 能 在 我 们 里 边 的 网 页 中 并 不 鲜 见 ， 只 不 过 
有 的 通过 Adobe Flash 或 微软 Silverlight 等 搬 件 实现 ， 而 有 的 则 是 利用 JavaScript 库 或 〈 更 艰 吉 地 ) 
完全 通过 手工 编写 JavaScript 代 码 来 实现 。 因 此 ,为 什么 不 在 HTML 标 准 中 加 入 官方 的 支持 ， 让 这 
些 功 能 在 所 有 浏览 硕 中 都 能 一 致 地 工作 呢 ? 


























注意 ”Flash 等 浏览 器 插件 不 会 一 夜 之 间 就 消失 ( 甚至 随后 几 年 都 不 会 )。 尽 管 HTMLS 有 很 多 创 
新 ， 但 通过 它 来 构建 复杂 的 图 形 界 面 应 用 ， 仍 然 不 是 件 轻而易举 的 事 (建议 读者 到 
www.flasharcade.com 中 去 看 一 看 那些 基于 浏览 器 的 游戏 ) 不 过 , HTMLS 的 终极 目标 很 清 
4b. 让 网 站 不 依赖 插件 也 能 够 提供 视频 、 丰 军 的 交互 功能 以 及 各 种 漂亮 的 效果 。 


1.3 HTML5 标记 初 体 验 


下 面 是 一 个 最 简单 的 HTML5 文 档 。 开 始 是 HTML5 的 文档 类 型 声明 ( doctype， 下 一 市 会 详细 
介绍 )， 然 后 是 页 面 标题 和 一 些 内 容 。 在 这 里 ， 内 容 是 包含 在 一 个 段 洛 中 的 文本 : 


«IDOCTYPE html» 
«title»A Tiny HTML Document«/title» 
«p»Let's rock the browser, HTML5 style.«/p» 


ALTES CAE CEN Vài PEMA, 不 过 为 了 验证 你 的 直 党 ， 可 以 参考 图 1-1。 

其 至 还 可 以 进一步 给 这 个 文档 瘦身 。 比 如 ，HTML5 标 准 不 要 求 必 须 有 最 后 面 那 个 </p> 标 签 ， 
因为 浏览 磊 知 道 在 文档 后 面 要 关闭 所 有 没有 关闭 的 标签 (HIMLS 标 准 规定 浏览 右 必 须 这 样 处 
理 )。 可 是 ， 这 种 简单 的 写法 会 让 标记 显得 很 乱 ， 甚 至 可 能 导致 意料 之 外 的 错误 。 

如 果 有 其 他 方式 提供 标题 信息 ，HTML5 标 准 也 允许 你 删 掉 <title> 元 素 。 比 如 ， 在 通过 电子 
邮件 发 送 HTML 文 档 时 , 可 以 把 标题 放 在 邮件 的 标题 中 , 而 把 其 他 标记 ( 文档 类 型 声明 以 及 内 容 ) 
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放 在 邮件 的 正文 里 。 不 过 ， 这 很 明显 是 一 种 特例 。 





包含 一 行文 本 的 超 简 单 的 HTML5 文 档 





| [| A Tiny HTML Document 





€) /Chapter 01/SuperSimpleHTMLS.htm| - C fr E- 





| Let's rock the browser, HIMLS style. 


| 
| 











更 常见 的 情况 , 则 是 充实 这 个 已 经 瘦 骨 贬 响 的 HITMLS 文 档 。 大 多 数 Web 开 发 人 员 都 认为 使 用 
<head> 和 <body> 来 分 块 可 以 避免 导致 混乱 ， 因 为 可 以 把 关于 页 面 的 信息 〈 头 部 ) 与 页 面 的 实际 内 
容 ( 主体 ) 分 开 。 在 为 页 面 添加 脚本 、 样 式 表 和 元 数据 的 时 候 ， 这 种 结构 特别 实用 : 


<!DOCTYPE html» 
<head> 
<title>A Tiny HTML Document</title> 
</head> 
<body> 
«p»Let's rock the browser, HTML5 style.</p> 
</body> 
当然 ,，( 第 3 行 和 第 6 行 ) PRESE 1x EEEREN Y VEU — RARE 
清楚 页 面 结构 。 
最 后 ， 还 可 以 选择 用 <html> 元 系 来 封 溪 整 个 文档 ( 不 包含 文档 类 型 声明 那 一 行 )。 结 琳 束 成 
了 了 这样: 
«IDOCTYPE html» 
«html» 
«head» 
«title»A Tiny HTML Document«/title» 
</head> 
<body> 
«p»Let's rock the browser, HTML5 style.</p> 
</body> 
</html> 


在 HIMLS 以 前 , Fr BUIBJHTMLE 7: 3853765 485 2:5K fii HH «html»7638 , 而 实际 上 用 不 用 它 对 浏 
览 器 来 说 是 无 所 谓 的 。HTMLS 则 规定 可 用 可 不 用 。 




















注意 ”使 不 使 用 <htm1l>、*《head> 和 <body> 元 素 只 代表 一 种 风格 。 即 便 是 在 HTMLS 诞 生 之 前 就 已 
经 存在 的 浏览 器 中 ， 不 用 这 些 元 素 ， 页 面 照 样 可 以 完美 呈现 。 事 实 上 ， 浏 览 器 会 自动 假 
设 页面 中 已 经 包含 了 这 些 元 素 。 因 此 ， 如 果 用 JavaScript 来 查询 DOM (表示 页 面 中 元 素 的 
一 组 对 象 ， 可 以 通过 编程 方式 访问 )， 仍然 能 够 找到 <html>、<head> 和 <body> 元 素 ， 无 论 
你 实际 上 加 还 是 没 加 。 
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现在 , 这 个 示例 比 最 简单 的 HIMLS 文 档 复 杂 一 些 , 但 比 真正 实用 的 HTMLS 网 页 又 简单 一 些 。 
接 下 来 的 几 节 ， 我 们 会 陆续 向 其 中 加 入 新 内 容 ， 同 时 也 对 标记 进行 简单 介绍 。 








1.3.4 HTML5 文档 类 型 





每 个 HTML5 文 档 的 第 一 行 都 必须 是 一 个 特定 的 文档 类 型 声明 。 这 个 文档 类 型 声明 用 于 告知 
所 有 查看 文档 的 人 ， 后面 都 是 HTML5 内 容 : 

«IDOCTYPE html» 

HTMLS 的 文档 类 型 声明 给 人 的 第 一 印象 就 是 极其 简单 。 特 别 是 与 见长 的 XHTML 1.0 严 格 型 
的 文档 类 型 声明 相 比 ， 这 一 点 更 明显 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http: //www.w3.org/TR/xhtm11/DTD/xhtml1-strict.dtd"» 

面 对 如 此 复杂 的 XHTML 文 档 类 型 声明 ， 就 连 专 业 的 Web 开 发 人 员 也 不 得 不 采用 复制 粘贴 的 
方法 。 相 比 之 下 ，HTML5S 的 文 梢 类 型 声明 条约 至 上 ， 手 工 输入 也 不 及 烦 。 

另外 , HTMLS 的 文档 声明 还 有 一 点 值得 注意 , 那 就 是 它 不 包含 官方 规范 的 版 本 号 ( 即 HTML5 
中 的 5 )。 事实 上 , 这 个 声明 仅仅 表明 当前 页 面 是 HTML 页 面 。 这 与 HTMLS 作 为 一 门 活着 的 语言 ( 见 
1.1.45 ) 的 远见 是 分 不 开 的 。 换 句 话 说， 只 要 有 新 功能 添加 到 HTML 语言 中 ， 你 在 页 面 中 束 可 以 
使 用 它们 ， 而 不 必 为 此 修改 文档 类 型 声明 。 

由 此 ， 不 少 读 者 可 能 都 会 提出 一 个 问题 ， 既 然 HTML5 是 一 门 活 语 言 ， 那 为 什么 还 要 求 网 页 
中 有 这 个 所 谓 的 文档 类 型 声明 呢 ? 

要 求 保留 文档 类 型 声明 , 主要 是 由 于 历史 原因 。 如 末 没 有 文档 类 型 声明 , 那 大 多 数 浏 览 带 ( 包 
括 Internet Explorer 和 Firefox ) 将 转换 到 一 种 混杂 模式 (quirk mode ) 。 在 这 种 模式 下 ， 浏 览 器 会 
尝试 根据 有 点 不 那么 正常 的 规则 呈现 网 页 (那些 规则 是 在 浏览 带 的 老 版 本 中 使 用 的 ), 而 问题 是 ， 
不 同 浏览 硕 的 混杂 模式 也 不 一 样 , 因此 为 一 种 浏览 希 设 计 的 页 面 到 了 另 一 个 浏览 希 中 , 不 是 字体 
大 小 不 一 样 ， 就 是 布局 上 有 瑕 辛 ， 或 者 出 现 其 他 不 一 至 的 问题 。 

而 在 添加 了 文档 类 型 声明 后 ， 浏 贤 带 就 知道 你 想 要 使 用 更 严格 的 标准 模式 ( standard mode ), 
在 这 种 模式 下 ,所 有 现代 浏览 絮 都 会 以 一 致 的 格式 和 布局 来 显示 网 页 。 浏览 各 不 关心 你 使 用 的 是 
哪 种 文档 类 型 (个 别 情况 下 还 有 些 例外 )， 只 要 它 检查 到 你 有 茶 种 文档 类 型 声明 就 好 。HTML5 的 
文档 类 型 声明 是 最 短 的 有 效 文 档 类 型 声明 ， 因 此 它 能 触发 标准 模式 。 




































































注 1: IE5.5 引 入 了 文档 模式 ( document mode ) 的 概念 ， 这 个 概念 是 通过 切换 文档 类 型 声明 实现 的 。 最 初 的 两 种 文档 
模式 是 : 混杂 模式 和 标准 模式 。 混 林 模 式 会 让 IE 的 行为 与 (包含 非 标 准 特性 的 ) IE5 相 同 ， 而 标准 模式 则 让 IE 
的 行为 更 接近 标准 行为 。 虽然 这 两 种 模式 主要 影响 CSS 内 容 的 呈现 , 但 在 某 些 情况 下 也 会 影响 到 JavaScript 的 解 
释 执 行 。 摘 自 《JavaScript 高 级 程序 设计 (第 3 版 )》P16 — P17，[ 美 J]Nicholas C. Zakas 著 ， 李 松 峰 、 曹 力 译 ， 人 
民 邮 电 出 版 社 2012 年 版 。( 译 者 注 ) 
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提示 HTMLS 的 文档 类 型 声明 可 以 触发 所 有 具备 标准 模式 的 浏览 器 的 标准 模式 ， 包 括 那 些 对 aooo 
HTML5 一 无 所 知 的 浏览 器 。 为 此 ,从 现在 开始 ,你 可 以 在 任何 网 页 中 都 使 用 HTML5 文 档 
类 型 声明 ， 即 便 使 用 很 少 得 到 支持 的 HTML5 功 能 也 没 问题 。 


虽然 文档 类 型 声明 主要 的 目的 是 告诉 浏览 絮 去 做 什么 , 但 其 他 代理 也 可 以 检测 该 声明 ， 比 
如 ，HTMLS 验 证 器 、 搜 索引 擎 、 设 计 工 具 ， 还 有 人 “在 想 知 道 你 当初 在 页 面 中 想 写 什么 样 的 
标记 时 )。 





1.3.2 ”字符 编码 


字符 编码 是 一 种 标准 ,计算 机 根据 它 把 文本 转换 成 保存 在 文档 中 的 字 节 序列 (或 者 在 打开 文 
件 时 再 将 字 节 序列 转换 成 文本 形式 )。 由 于 历史 原因 ， 现 有 的 编码 标准 有 很 多 种 。 但 实际 上 ， 所 
有 英文 网 站 今天 都 在 使 用 一 种 叫 UTF-8 的 编码 ， 这 种 编码 简洁 、 转 换 速 度 快 ， 而 且 支 持 任 何 你 想 
要 的 非 莫 文字 符 。 

一 般 来 说 ， 经 过 配置 的 Web 服 务 融 会 告诉 浏览 需 它 提供 的 网 页 采用 了 什么 编码 。 但 除非 是 你 
自己 配置 的 Web 服 务 右 ， 否 则 这 一 步 始终 是 不 确定 的 。 由 于 浏览 带 在 猜测 网 页 编码 的 时 候 可 能 会 
引发 一 些 说 不 清 的 安全 问题 ， 因 此 最 好 在 自己 的 标记 中 也 加 上 编码 信息 。 

在 HTML5 文 档 中 添加 字符 编码 信息 也 很 人 简单。 只 要 像 下面 这 样 在 chead> 区 块 的 最 开始 处 
(如 果 没 有 添加 chead> 元 素 ， 则 是 紧 跟 在 文档 类 型 声明 之 后 ) 添加 相应 的 元 数据 (meta) 元 素 
即 可 : 


«head» 

«meta charset-"utf-8"» 

«title»A Tiny HTML Document«/title» 
«/head» 


Dreamweavergk Expression Web 在 创建 新 网 页 时 自动 添加 这 个 元 信息 ， 它 们 也 会 确保 将 文件 保 
存 为 UTF 编 码 格 式 。 不 过 ， 如 果 你 使 用 的 是 简单 的 文本 编辑 器 ， 那 就 还 要 自己 选择 将 文件 保存 为 
正确 的 格式 。 比 如 ,使 用 Windows 中 的 记事 本 程序 编写 HTML 页 面 后 ,必须 在 “保存 为 ”对 话 框 下 
方 的 “编码 ”列表 中 选择 “UTF-8”。 而 在 使 用 Mac OS 中 的 TextEdit 时 ， 首 先 需 要 选择 “格式 ”> 
“生成 纯 文本 ”， 以 确保 程序 将 页 面 保存 为 纯 文本 ， 然后 必须 再 从 “保存 为 ”对 话 框 的 “ 纯 文本 编 
人 码 ” 弹 出 亲 单 中 选择 “Unicode(UTF-8)”。 









































1.3.3 ”页 面 语言 


指明 网 页 中 使 用 的 自然 语言 是 一 种 好 习惯 。 这 个 信息 有 时 候 对 其 他 人 有 用 ， 比 如 搜索 引擎 可 
以 通过 它 来 奖 选 搜索 结果 ， 确 保 只 回 搜 索 者 返回 页 面 语言 与 他 使 用 的 语言 相同 的 页 面 。 

为 给 内 容 指 定语 言 ， 可 以 在 任何 元 素 上 使 用 lang 属 性 ， 并 为 该 属性 指定 相应 的 语言 代码 ( 比 
如 ，en 表 示 英 语 )。 各国 的 语言 代码 可 以 在 这 里 查 到 : http://people.w3.org/rishida/utils/subtags/。 
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为 整个 页 面 添加 语言 说 明 的 最 简单 方式 ， 就 是 为 chtm1> 元 系 指 定 lang 属 性 : 

«html lang-"en"» 

AIR: Xd TRE PUB AERE HERI OCA, RAAN fe ION BE D Idi DL I RU HH ERR 
情 沉 下 ， 可 以 为 文本 中 的 不 同 区 块 指定 1ang 属 性 ， 指 明 该 区 块 中 文本 的 语言 ( 例如， 可 以 给 包 
含 不同 语言 文本 的 <div> 元 素 指定 不 同 的 lang 属 性 ), 这 样 , Big D ede t n] LASTE BE as T1] 
XA To 


1.3.4 ”添加 样式 表 


只 要 是 经 过 特意 设计 的 专业 网 站 ,就 一 定 会 使 用 样式 表 。 指 定 想 要 使 用 的 样式 表 时 ,需要 在 
HTML5 文 档 的 xchead> 区 块 中 添加 <1ink> 元 素 ， 例 如 : 


<head> 

«meta charset="utf-8"> 

«title»A Tiny HTML Document</title> 

«link href-"styles.css" rel-"stylesheet"» 
«/head» 


这 跟 回 传统 的 HTML 文档 中 添加 样式 表 大 同 小 异 ， 但 稍微 简单 一 点 。 因 为 CSS 是 网 页 中 唯一 
可 用 的 样式 表 语 言 ， 所 以 网 页 中 过 去 要 求 的 type="text/css" 必 性 就 没有 什么 必要 了 。 





























1.3.5 $JHJavaScript 


JavaScript 最 早 是 为 了 给 沉 癌 无 聊 的 网 页 添加 一 些 闪 交点 和 吸引 力 才 出 现 的 ,不 过 编写 起 来 比 
较 训 时间。 今天 ，JavaScript 的 主要 用 途 不 再 是 狠 饰 用 户 界面 ， 而 是 开发 新 奇 的 Web 应 用 ,包括 在 
浏览 顶 中 运行 的 极其 先进 的 电子 邮件 客户 靖 、 文 字 处 理 程序 ， 以 及 地 图 引擎 。 

在 HTML5 页 面 中 添加 JavaScript 与 在 传统 页 面 中 汪 加 差不多 ， 下 面 就 是 一 个 引用 外 部 
JavaScript 代 码 文件 的 示例 : 


<head> 
«meta charset="utf-8"> 
«title»A Tiny HTML Document</title> 
«script src-"scripts.js"»«/script» 
</head> 


没有 必要 加 上 1language="JavaScript" 属 性 。 T0] 93i zs e XE PRAE H JavaScript, 除非 你 想 使 
用 其 他 脚本 语言 ( 为 JavaScript 是 唯一 被 浏览 磺 广 泛 文 持 的 HIML 脚 本 编写 语言 ,所 以 你 不 会 指 
定 其 他 语言 。) 不 过 ， 即 使 是 引用 外 部 JavaScript 文 件 ， 也 不 能 起 了 后 面 的 </script> 标 签 。 假 如 你 
不 写 这 个 标签 ， 或 者 使 用 空 元 系 语 法 想 缩短 标记 ， 页 面 将 不 会 执行 加 载 脚 本 。 

如 果 你 在 Internet Explorer 中 要 花 大 量 时 间 测 试 包含 JavaScript 的 页 面 , 还 应 该 在 chead> 区 块 中 
包含 一 行 特殊 的 注释 ， 叫 做 Web 标 志 (markofthe Web) !; 这 行 注释 要 放 在 指定 字符 编码 的 元 数 
据 标 签 后 面 ， 如 下 所 示 : 


























注 1: 参见 “Mark ofthe Web": http:/msdn.microsoft.comy/zh-cmlibrary/ms5$37628(v=vs.85).aspx。( 译 者 注 ) 
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«head» 
«meta charset-"utf-8"» 
«!-- saved from url-(0014)about:internet --> 
«title»A Tiny HTML Document«/title» 
«script src-"scripts.js"»«/script» 
</head> 


这 条 注释 告诉 Internet Explorer 将 页 面 视 为 从 远程 网 站 上 下 和 载 下 来 的 。 否 则 ，IE 会 切换 到 一 种 
特殊 的 锁定 模式 ,弹出 一 条 安全 警告 , 在 你 点 了 “人 允许 阻止 的 内 容 ” 按 钮 之 后 才 会 执行 JavaScript 
代码 。 

其 他 所 有 浏览 融 都 会 忽略 这 个 “Web 标 志 ” 注 释 ， 对 远程 站 点 和 本 地 文件 使 用 相同 的 安全 














如 打 你 按照 上 面 这 些 步 又 做 了 ， 那 就 有 了 一 个 如 下 所 示 的 HIMLS 文 档 : 


<!DOCTYPE html» 
«html lang= en > 
«head» 
«meta charset-"utf-8"» 
«title»A Tiny HTML Document«/title» 
«link href-"styles.css" rel-"stylesheet"» 
«script src-"scripts.js"»«/script» 
«/head» 


<body> 

«p»Let's rock the browser, HTML5 style.</p> 
</body> 
</html> 


虽然 这 不 再 是 一 个 最 短 的 HTML5 文 档 ， 但 以 它 为 基础 可 以 构建 出 任何 网 页 。 这 个 例子 本 身 
没什么 可 圈 可 点 之 处 , 不 过 在 下 一 章 创建 真实 网 页 的 过 程 中 , 我 们 会 为 内 容 精心 设计 布局 并 通过 
CSS 应 用 样式 。 


注意 ”本 节 介 绍 的 所 有 HTMLS 语 法 一 一 新 的 文档 类 型 声明、 上 声明 字符 编码 的 元 数据 元 素 、 语 言 
言 息 属 性 和 引用 样式 表 及 JavaScript 标 签 ， 同 时 适用 于 新 旧 浏 览 器 。 因 为 这 些 语 法 依赖 于 
所 有 浏览 器 的 默认 行为 和 内 置 的 纠 错 机 制 。 


1.4 HTML5 语法 
如 前 所 述 ，HTMLS 放 松 了 茶 些 规 则 。 这 是 因为 HIMLS 的 制定 者 想 让 这 门 语言 更 紧密 地 反映 


浏览 絮 的 现实 。 换 句 话 说， 他 们 想 缩小 “可 以 工作 的 网 页 ”与 “根据 标准 是 有 效 的 网 页 ”之 间 的 
差距 。 接 下 来 ， 我 们 就 介绍 一 下 HTML5 改 变 的 语法 规则 。 
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注意 ” 没 错 ， 还 有 很 多 浏览 器 支持 的 老式 做 法 被 HTML5 标 准 严 格 排除 在 外 。 要 想 及 时 改正 这 些 
老 毛 病 ， 需 要 用 到 1.4.2 节 介绍 的 HTML5 验 证 器 。 


1.4.1 放松 的 规则 


在 初次 体验 HTML5 文 档 之 后 ， 我 们 知道 HTML5 并 不 要 求 网 页 中 必须 包含 chtml>、 «head» il 
<body> 元 素 ( 尽管 它们 的 存在 有 时 候 非常 有 用 )。 但 HTMLS 的 轻松 态度 还 不 止 于 此 。 
HTML5 不 区 分 大 小 写 ， 因 此 类 似 下 面 这 样 的 标记 是 没有 问题 的 : 


«P»Capital and lowercase letters «EM»don't matter«/eM» in tag names.</p>. 


HTMLS 还 允许 省 略 关闭 空 元 素 (void element ) 的 斜 杜 ; MAZINA, MESKEN 
元 素 ， 如 kinmg> ( KHR), <br> (换行 ) 或 chr>( 水平线 )。 以 下 是 三 种 添加 换行 的 等 价 方式 : 


I cannot«br /> 
move backward«br» 
or forward.«br/» 
I am caught 


HTML5 也 修改 属性 的 语法 规则 。 属 性 值 中 只 要 不 包含 受 限 的 字符 ( 比如 >、= 或 空格 ), 就 可 
以 不 加 引号 。 下 面 这 个 <img> 元 素 就 利用 了 这 一 点 : 

«img alt= Horsehead Nebula" src-HorseheadO1.jpg^ 

只 有 属性 名 没有 属性 值 也 可 以 。 虽 然 XHTML 要 求 必须 采用 如 下 宛 余 的 语法 将 复 选 框 设置 为 
选中 状态 : 

«input type="checkbox" checked="checked" /> 

但 现在 可 以 只 包含 属性 名 ， 回 到 HTML 4.01 时 代 的 传统 短语 法 形式 : 

«input type="checkbox" checked» 


对 某 些 人 来 说 ，HTML5 最 令 人 担心 的 还 不 是 这 些 。 他 们 担心 那些 经 党 改变 风格 的 开发 人 员 
会 在 严格 的 和 松散 的 语法 之 间 播 摆 不 定 ， 特 别 是 在 pee 内 部 也 经 党 转换 风格 。 可 是 ,这 种 情 
况 在 XHTML 时 代 同 样 存在 。 无 论 是 严格 还 是 松散 ， 良 好 的 风格 都 取决 于 Web 设 计 师 ， 而 浏览 3 
则 会 无 条 件 地 接受 你 扔 给 它 的 任何 东西 。 

如 有 果 能 做 到 如 下 几 点 (也 是 本 书后 续 示 例 近 人 循 的 约定 一 一 尽管 不 是 必须 遵循 的 )， 基 本 上 就 
可 以 算 作 良 好 的 HTML5 风 格 了 。 

口 包含 可 选 的 chtml>、<body> 和 和 <head> 元 素 。 要 给 页 面 定 义 目 然 语 言 CII3.3 35 ), «html» 
是 最 理想 的 地 方 ; 而 <body> 和 <head> 有 助 于 将 页 面 内 容 与 其 他 页 面 信息 分 离 。 
口 标签 全 部 小 写 。 虽然 不 是 必须 这 么 做 , 但 这 种 形式 很 常见 , 输入 起 来 要 轻松 容易 得 多 ( 
为 不 需要 按 Shift 键 )， 而 且 不 会 让 人 触目 慰 心 。 
a 为 属性 值 加 引号 。 加 引号 是 有 理由 的 一 一 防止 你 在 不 经 音 间 犯错 。 要 知道 ， 没 有 3 引号 的 
话 ， 一 个 无 效 学 和 从 就 可 能 破坏 整个 页 面 。 
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不 过 , 还 有 一 些 老 的 约定 这 里 并 没有 列 出 来 (你 也 可 以 忽略 )。 本 书 的 示例 不 会 关闭 空 元 素 ， [am 
因为 在 基于 HTML5 编 写 代 码 时 ,大 多 数 人 都 不 居于 添加 额外 的 斜 杠 (/)。 类似 地 , 在 属性 名 与 属 
性 值 相 同 的 情况 下 ， 还 一 味 地 留恋 长 属性 的 形式 也 没有 什么 道理 。 





1.4.2 HTML5 验证 


没准 儿 新 的 松散 的 HTML5 语 法 让 你 觉得 很 舒服 。 没 准 儿 ， 一 想到 欢快 的 浏览 妖冶 后 可 能 隐 
藏 着 不 一 致 的 、 到 处 都 是 错误 的 标记 ， 你 人 简直 夜 不 能 弛 。 如 果 你 不 垃 是 后 一 种 情况 ， 那么 一 定 会 
ra zT SABE: 有 验证 工具 可 以 帮 你 抓 住 那些 与 HTML5 推 大 标准 不 相符 的 标记 ， 其 至 都 不 
会 司 扰 浏览 硕 。 

以 下 就 是 HTML5 验 证 途 会 关注 的 一 些 可 能 的 问题 . 

口 缺少 必需 的 元 素 〈 例 如 title> 元 素 ); 

口 有 开始 标签 但 没有 结束 标签 ; 

OQ 标 签 航 套 错 误 ; 

口 不 包含 必要 属性 的 标签 ( 例如 没有 src 属 性 的 <img> 元 系 ); 

OQ 元 素 或 内 容 放 错 了 地 方 〈 例 如 把 文本 下 接 放 在 了 <head> 区 块 中 )。 

Dreamweaver 和 Expression Web 等 Web 设 计 工 具 都 有 它们 目 计 的 验证 需 , 但 只 有 最 新 版 本 才 文 
持 HTML5 验 证 。 实 际 上 ， 你 还 可 以 使 用 在 线 验 证 工具 ， 下 面 我 们 展示 如 何 使 用 W3C 标 准 组 织 提 
BERTA T HUS E RR c 

(1) 在 浏览 器 中 ， 打 开 http://validator.w3.org ( 图 1-2 )。 

















[E The W3C Markup Validati... 中 1-2: W3C 的 验 证 i 站 FA 
€ 3 QC O validatorw3org/tvalidate by input http://validator.w3.org 1 14 T = 
个 验证 HTML 的 选项 ,可 以 填写 

W3C Markup Validation Service 网 页 的 地 址 、 上 传 网 页 或 直接 输 
itd ddl ANE bts 入 标记 ( 如 图 所 示 就 是 直接 输入 


Validate by URI Validate by File Upload Validate by Direct)nput Jl 标记 ) 
Validate by direct input 


Enter the Markup to validate 
«!DOCTYPE html» 
html langz-"en"» 





charset- ge" 
fz"styles.css" rel-"stylesheet"» 
«script src-"scripts.js"»«/script» 
«/head» 


«b 


ody» 
«p»Be careful not to overlap nearby nested elements, «strong»or else!«/p»«/strong» 


- 


«/body 
«/html» ^ 


» More Options 








validator.w3.org/*validate by input 
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W3C 验 证 需 为 你 提供 了 三 个 选择 ， 分 别 用 三 个 选项 卡 表 示 :“Validate by URI”( 针对 已 经 音 
署 到 Web 服 务 器 中 的 页 面 ) "Validate by File Upload”( 针对 保存 在 你 电脑 硬盘 上 的 页 面 ) 和 
"Validate by Direct Input". ( 针对 你 目 己 直接 输入 的 一 推 标记 )。 

(2) 单 击 相 应 的 选项 卡 ， 提 供 HTML 内 容 。 

口 “Validate by URI” 可 以 验证 已 经 存在 的 网 页 。 只 要 在 Address (地址 ) 框 中 输入 页 面 的 
URL 即 可 (例如 http://www.mysloppysite.com/FlawedPage.html )。 

O “Validate by File Upload” 可 以 验证 你 电脑 便 盘 上 的 页 面 。 首 先 ， 单 击 Browse (浏览 
按钮 ( 在 Chrome 中 单 击 Choose File< 选 择 文件 > )。 在 “打开 ”对 话 杠 中， 选择 HTML 
文件 并 单 击 Open (打开 )。 

口 “Validate by Direct Input” 可 以 验证 任何 标记 一 一 只 要 在 大 文本 框 里 输入 即 可 。 从 文本 
编辑 需 中 直接 把 标记 复制 粘贴 到 W3C 验 证 页 面 的 文本 框 里 是 最 简单 的 方式 。 

在 继续 之 前 ， 可 以 单 击 More Options ( 更 多 选项 ) 修改 设置 ， 不 过 一 般 不 用 。 例 如 ， 最 好 是 
让 验证 带 目 动 检测 文档 类 型 ， 因为 这 样 验证 融会 使 用 你 在 网 页 中 指定 的 文档 类 型 。 类似 地 ， 除 非 
你 的 页 面 中 使 用 了 不 同 的 语言 ， 而 验证 带 无 法 确定 正确 的 字符 集 ， 否 则 就 用 自动 检测 好 了 。 

(3) 单 击 Check ( 检测 ) 按钮 。 

这 样 束 会 把 HTML 页 面 发 送 到 W3C 验 证 从。 稍微 等 一 会 儿 ， 就 会 看 到 报告 。 你 会 看 到 目 己 的 
文档 是 否 通过 了 验证， 而 如 有 果 失 败 的 话 ， 则 会 看 到 验证 各 检测 到 的 错误 ( 见 图 1-3 )。 









































EEES) 图 1-3: 验证 器 发 现 了 由 两 个 过 失 


E [Invalid] Markup Validati... 中 ~ 
€ 6/ oyal 衍生 出 来 的 四 个 差错 。 首 先 ， 页 
^ NL Mmm : E , 
Validation Output: 4 Errors E 中 没有 必需 的 <title> 元 素 , 其 
次 ，<p> 元 素 在 请 套 的 <strong> 结 
Q Line 7, Column 7: Element head is missing a required instance of child element title. s a sp ` 、 
束 之 前 先 结束 。 ( 要 解决 这 些 问 


</head> 


Content model for element neza: 题 , 把 «/p»«/strong» 替 换 成 


If the e is an iframe Erari document or if title information is available from a higher-level i A 
protocol: Zero or more elements of metadata content. . . H 总 一 
Otherwise: One or more elements of metadata content, of which exactly one is a title element < / strong»« /p» Bl oj Oo ) 顺便 1 


句 ， 这 个 文档 中 的 问题 并 不 影响 


yp UB 一 天 一 
Q Line 10, Column 75: End tag p seen, but there were open elements. F, JT A X 9528 1E O8 地 显示 - 


-Be careful not to overlap nearby nested elements, «strong»or else!</p> </strong> 


Q Line 10, Column 63: Unclosed element strong. 


-Be careful not to overlap nearby nested elements, «strong? or else!«/p»«/strong» 


Q Line 10, Column 84: No element strong to close. 


-Be careful not to overlap nearby nested elements, «strong»or else!«/p»«/strong? 
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注意 ”即便 是 验证 之 后 没有 发 现 一 点 问题 的 文档 ， 验 证 器 也 会 给 出 一 些 警 告 ， 包 括 字 符 编 码 是 
自动 检测 到 的 ，HTMLS 验 证 服务 还 处 于 试验 阶段 、 还 不 完善 ， 等 等 。 


1.4.3 XHTML 的 回归 


如 前 所 述 ，HTMLS 宣 布 了 上 一 个 Web 王 朝 一 XHTML 时 代 的 终结 。 但 是 ， 现 实 可 没有 那么 
简单 ，XHTMIL 的 拥 熏 也 不 必 放 弃 上 一 代 标 记 语 言 中 自己 最 热爱 的 东西 。 

首先 ， 别 忘 了 XHTML 语 法 还 在 呢 。XHTML 强 制 要 求 的 规则 要 么 仍 具 有 指导 意义 (例如, 元 
素 要 正确 散 套 )， 要 么 仍然 是 一 种 得 到 支持 的 可 选 约定 (例如 ， 空 元 素 可 以 包含 结束 的 斜 杠 )。 

要 是 想 强 制 使 用 XHTML 语 法 呢 ?” 也 许 你 担心 自己 (或 者 自己 的 同事 ) TERES IB] “Ay” 
到 使 用 过 去 HTML 的 松散 语法 。 不 要 紧 ， 可 以 使 用 XHTML5; 这 个 标准 还 没有 多 少 人 知道 ， 其 本 
质 是 给 HTML5 加 上 了 XML 的 限制 。 

如 果 想 把 一 个 HTML5 文 档 转 换 成 XHTML5 文 档 ， 必须 在 chtml> 元 素 中 明确 添加 XHTML 命 名 
空间 、 关 闭 每 一 个 元 素 、 所 有 标签 都 要 小 写 …… 下 面 就 是 一 个 XHTMLS 文 档 的 示例 : 


«IDOCTYPE html» 
«html lang-"en" xmlns-"http://www.w3.0rg/1999/xhtml"» 
«head» 
«meta charset-"utf-8"/» 
«title»A Tiny HTML Document«/title» 
«link href-"styles.css" rel-"stylesheet"/» 
«script src-"scripts.js"»«/script» 
</head> 


























<body> 

«p»Let's rock the browser, XHTML5 style.</p> 
</body> 
</html> 


这 样 ， 就 可 以 使 用 XHTML5S 验 证 器 基于 早先 的 XHTML 规则 对 其 进行 更 严格 的 错误 检测 了 。 
W3C 的 验证 器 不 行 , 但 可 以 使 用 Validatornu ( http://validator.nu )， 它 在 Preset ( 预 设 ) 下 拉 列 表 中 
提供 了 XHTML5S 选 项 。( 如 果 你 不 是 直接 输入 页 面 的 标记 ， 或 者 不 是 把 标记 粘贴 到 文本 框 中 ， 那 
还 需要 选 上 “Be lax about HTTP Content-Type”< 不 严格 要 求 HTTP Content-Type» )。 

按照 上 述 步 又 ， 你 可 以 创建 并 验证 一 个 XHTML 文档。 可是， 浏览 器 仍然 只 会 将 你 的 页 面 当 
成 HTML5 文 档 来 解释 ， 只 不 过 这 个 文档 有 意 要 癌 XML 靠 扰 黑 了 。 除 此 之 外 ， 浏览 器 不 会 应 用 任 
何 规 则 。 

如 果 你 想 系 统 地 支持 XHTML5 ， 还 必须 配置 Web 服 务 需 ， 以 application/xhtml+xml 或 
application/xml 的 MIME 类 型 来 提供 网 页 (不 能 再 使 用 text/html; 有 关 MIME 类 型 请 参见 5.3.2 市 )。 
不 过 , 在 致电 主机 托管 公司 之 前 , 务必 清醒 地 认识 到 : 这 一 修改 会 导致 IE9 之 前 所 有 版 本 的 Internet 
Explorer 均 无 法 显示 你 的 页 面 。 换 句 话 说 ， 真 正 的 XHTML5 有 浏览 妖 莱 容 性 问题 。 

有 了 时候 ， 即 便 支 持 XHTML5 的 浏览 器 在 处 理 XHTML5 文 档 时 也 会 与 处 理 普通 的 HTML5 文 档 
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有 所 区 别 。 这 些 浏览 器 将 它 作为 XML 文档 处 理 ， 如 果 处 理 失 败 〈 比 如 因为 你 有 个 地 方 没 写 对 ), 
浏览 需 就 不 会 再 解释 文档 的 其 他 部 分 了 。 

到 底 什 么 时 候 使 用 XHTML5? 对 于 绝 大 多 数 Web 开 发 人 员 ， 无 论 是 一 般 人 还 是 HTMLS 的 铁 
杆 粉 缘 ， 都 没有 必要 使 用 XHTML5， 以 免 招 营 厂 烦 。 唯 一 的 例外 ， 就 是 那些 以 XML 作 为 开发 目 
标的 程序 员 ( 例如 ， 想 要 使 用 XQuery 和 XPath 等 XML 相 关 的 标准 来 操作 页 面 内 容 的 开发 人 员 )。 








提示 “对 于 好 奇 的 读者 ， 我 可 以 告诉 你 一 个 技巧 ,能 让 浏览 器 切换 到 XHTML 模式 一 一 只 要 把 文 
件 的 扩展 名 改 为 .xhtml 或 .xzht 即 可 。 然 后 在 硬盘 中 打开 这 个 文件 , 多数 浏览 器 ( 包括 Firefox、 
Chrome 和 IE9 ) 都 会 认为 该 页 面 是 从 Web 服 务 器 下 载 下 来 的 ， 而 且 MIME 类 型 为 XML 。 如 
果 页 面 中 有 什么 错误 ， 浏 览 器 窗口 会 显示 只 处 理 了 一 部 分 的 页 面 (IE9 )、XML 错 误 消 息 
( Firefox ) 或 二 者 的 组 合 ( Chrome )。 


1.5 HTML5 元 素 家 族 


到 目前 为 止 ,本 章 集 中 讨论 了 HTML5 语 法 的 变化 ,但 更 重要 的 则 是 新 增 减少 及 改变 了 HTML 
哪些 支持 的 元 素 。 接 下 来 的 几 节 将 分 别 讨论 这 些 方面 的 变化 。 
1.5.1 新 增 的 元 素 


在 接 下 来 的 几 章 , 我 们 将 主要 把 时 间 放 在 学 习 新 元 素 上 , 这 些 元 系 在 此 之 前 从 来 没有 在 网 页 
中 出 现 过 。 表 1-1 列 表 出 这 些 新 元 系 ( 以 及 哪 一 草包 含 对 相应 元 系 的 详细 介绍 )。 


表 1-1 HTMLS5 新 增 的 元 素 








类 别 7L 素 哪 部 分 详细 介绍 
用 于 构建 页 面 的 «article», «aside», «figcaption», «figure», «footer», «header», 第 2 章 
语义 元 素 «hgroup», «nav», «section», «details», «summary» 


用 于 标识 文本 的 «mark», «time», «wbr» (以 前 就 支持 ， 但 现在 已 经 正式 列 入 规范 ) 第 3 章 

语义 元 素 

Web 表 单 及 交互 — «input» (不 是 新 元 素 , 但 增加 了 很 多 了 类 型 ) «datalist», «keygen», 第 4 章 
«meter», «progress», «command», «menu», «output» 


音频 、 视 频 及 插件 «audio», «video», «source», «embed» 〈 以 前 就 支持 ， 但 现在 已 经 正 ”第 5 章 











式 列 入 规范 ) 
Canvas «canvas» 第 6 童 
非 英 语 支持 «bdo», «rp», «rt», «ruby» HTML;S 规 75 http://dev. 


w3.org/html5/markup 


1.5.2 ”删除 的 元 素 
HTMLS 一 方面 添加 了 新 元 素 ， 另 一 方面 也 从 官方 标准 中 剔除 了 少量 元 素 。 这 些 元 素 仍 然 可 
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VATI Vd od. ABAE SE MED TL HJHTMLSJS uE zi bz UE) HE TEC LET. JPERIB 
错误 提示 ( 见 1.4.2 市 )。 

最 明显 的 一 点 是 ，HTMLS 沿 袭 了 不 欢迎 表现 性 元 素 的 思想 ( 最初 萌发 于 XHTML )。 所 谓 表 
现 性 元 素 ， 指 的 是 那些 仅仅 是 为 网 页 添加 样式 的 元 素 ， 而 连 最 集 的 Web 设 计 人 员 也 知道 那 是 样式 
表 该 干 的 事 儿 。 被 剔除 的 元 又 都 是 专业 开发 人 员 很 多 年 没有 用 过 的 元 素 〈 如 《big>、*《center>、 
«font», «tt»fll«strike» )。HTMEL 的 表现 性 属性 也 与 之 “同归于尽 ”了 ,没有 什么 必要 在 这 里 列 
出 来 了 。 

此 外 ，HTML5 进 一 步 埋 萄 了 Web 开 发 人 员 原 来 已 经 握 茎 的 HTML 框 架 。 最初 ，HTML 框 架 似 
乎 是 在 浏览 硕 窗 口中 显示 多 个 网 页 的 不 错 方 式 ， 但 如 今 ， 框 架 往 往 意 味 着 严重 的 可 访问 性 问题 ， 
难以 适应 搜索 引擎 、 辅 助 软 件 和 移动 设备 。 而 有 意思 的 是 ，《iframe> 元 素 〈 通 过 它 可 以 将 一 个 网 
页 放 在 另 一 个 网 页 中 ) 倒是 侥 斑 得 以 保留 。 究 其 原因 ， 主 要 是 Web 应 用 经 常 要 利用 <iframe> 实 现 
一 些 集成 任务 ， 比 如 在 网 页 中 包含 YouTube 和 窗口 、 广 告 单 元 和 谷歌 搜索 框 等 。 

还 有 另外 一 些 元 素 ， 由 于 宛 余 或 容易 导致 误会 等 原因 也 被 如 除 了 ， 比 如 <acronym> (fV 
以 <abbr> ) 和 <applet>( 因为 <object> 更 好 ) 但 元 素 家 族 的 绝 大 部 分 成 员 照 旧 还 生活 在 HIML5 
时 代 。 





























注意 HTML5 元 素 家 族 中 保留 的 元 素 超 过 100 个 。 除 此 之 外 ， 差 不 多 有 30 个 新 元 素 ， 还 有 大 约 
10 个 有 显著 改 交 。 要 了 解 完整 的 元 素 列表 (以 及 哪些 是 新 元 素 、 哪 些 改变 了 )， 请 参考 
http://dev.w3.org/html5/markup/- 


1.5.3 ”改变 的 元 素 


HTML5 还 有 为 一 个 奇怪 的 做 法 : 有 时 候 会 将 一 个 旧 元 素 用 于 新 的 目的 。 例 如 ,<smal1> 元 系 
的 用 途 不 再 是 减少 文本 字体 的 大 小 ( 这 本 来 应 该 是 样式 表 的 任务 )。HITML5 虽 然 删 除了 <big> 元 
素 , 但 却 保 留 了 <smal1> 元 素 ,， 不 过 含义 变 了 。 现 在 , “smal1> 元 和 素 表示 “附属 细则 ”( small print ), 
比如 页 面 底部 没 人 想 让 你 看 到 那些 法 律 条 球 : 


«small»The creators of this site will not be held liable for any injuries that 
may result from unsupervised unicycle racing.«/small» 


放 在 <smal1> 元 素 中 的 文本 仍然 照管 显示 ， 只 不 过 字体 稍 小 一 点 ， 除 非 你 可 使 用 样式 表 重 写 
它 的 样式 。 

















注意 ”人 们 对 <smal1> 元 素 有 两 种 看 法 。 一 种 看 法 认为 它 做 到 了 最 大 限度 的 向 后 兼容 ， 因 为 老 浏 

览 器 都 支持 <smal1> 元 素 ,， 而 HIMLS 页 面 中 还 将 继续 支持 它 。 另 一 种 看 法 认为 它 会 导致 旧 
页 中 相应 元 素 的 语义 变化 ， 过 去 是 用 <smal1> 元 素来 减少 文本 大 小 ， 但 其 中 的 文本 不 一 
定 就 是 “附属 细则 ”之 类 的 。 


x 
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男 一 个 改变 的 元 素 是 <hr> ( horizontal rule, KER ), 用 于 在 两 个 区 块 间 画 一 条 线 。 在 HTML5 
中 ，<hr> 表 示 主 题 的 转换 ， 即 从 一 个 主题 变 为 另 一 个 主题 。 默 认 的 格式 还 在 ， 只 不 过 又 赋 子 了 新 
的 含义 。 

类 似 地 ，<s>( struck text， 删 除 的 文本 ) 也 不 仅仅 是 给 文本 加 一 条 删除 线 那 么 简单 卫 ， 它 现 
在 表示 不 再 准确 或 不 再 相关 的 内 容 。<hr> 元 每 与 <s> 元 系 的 变化 都 不 及 <small> 元 系 那 么 大 ， 至 少 
还 与 它们 传统 HTML 中 的 用 法 有 联系 。 

粗 体 和 和 斜体 

要 说 最 重要 的 变化 ， 非 粗 体 和 和 斜体 这 两 个 格式 化 元 素 莫 属 。XHTML 1.0 诞 生 后 ，HTML 中 最 
各 用 的 两 个 表示 粗 体 和 和 斜体 的 元 系 <b> 和 <i> 部 分 被 <strong> 和 <em> 元 系 取 代 。 其 青 后 的 思想 是 停 
止 从 格式 ( 粗 体 和 斜体 ) 的 角度 来 看 问题 ， 而 是 要 换 成 使 用 具有 真实 逻辑 含义 (重要 或 重音 ) 的 
元 紊 。 这 种 思想 当然 很 有 意义 ， 但 xb> 和 <iy 这 两 个 标签 仍然 作为 XHTML 新 引入 的 两 个 标签 的 简 
写 形 式 存在 着 ， 因 为 大 家 对 它们 更 熟悉 。 

HTML5 尝 试 解 决 这 个 问题 。 它 没有 强迫 开发 人 员 放 弃 <b> 和 <i>， 而 是 为 这 两 个 元 素 赋 也 了 
新 的 含义 。 背后 的 思想 就 是 允许 上 述 4 个 元 了 双 在 有 效 的 HTML5 文 档 中 共存 ,但 结果 多 少 让 人 有 点 
迷惑 ， 下 面 分 别 说 明 。 

口 使 用 <strong> 表 示 重 要 的 文本 内 容 ， 也 就 是 那些 需要 在 周围 文本 中 突出 出 来 的 文本 。 

O 使 用 <b> 表 示 应 该 用 粗 体 表示 的 文本 ， 但 该 文本 并 不 比 其 他 文本 更 重要 。 比 如 ， 关 键 字 、 

产品 名 称 等 所 有 需要 用 粗 体 表示 的 文本 都 可 以 用 这 个 标签 。 
O 使 用 <em> 表 示 重 读 的 文本 ， 也 就 是 在 天 读 的 时 候 要 大 声 恋 出 来 。 
Q 使 用 <i> 表 示 应 该 用 斜体 表示 的 文本 , 但 该 文本 并 不 比 其 他 文本 更 重要 。 比 如 , 外文 单词 、 
技术 术语 等 所 有 需要 使 用 斜体 表示 的 文本 都 可 以 用 这 个 标签 。 
以 下 这 段 代码 以 适当 的 方式 使 用 了 上 述 全 部 4 个 标签 : 
«strong»Breaking news!«/strong» There's a sale on «i»leche quemada«/i» candy 


at the «b»El Azul«/b» restaurant. Don't delay, because when the last candy 
is gone, it's «em»gone«/em». 


TEWI Vds P. BAPU PEDE: 


Breaking news! There's a sale on /eche quemada candy at the El Azul restaurant. Don't 






























































delay, because when the last candy is gone, it's gone. 
对 Web 开 发 人 员 来 说 , 他 们 是 遵循 HTML5 这 个 善意 的 规则 , 还 是 继续 使 用 自己 最 熟悉 的 元 素 
去 标 粗 体 和 和 斜体 格式 ， 让 我 们 拭目以待 。 











1.5.4 ”调整 的 元 素 


HTML5 也 调整 了 一 些 元 系 的 使 用 规则 。 要 说 啊 , 这 些 调 整 只 有 那些 死 外 HTML 的 家 伙 才 会 注 
意 到 ,但 偶尔 也 会 产生 比较 大 的 影响 。 举 一 个 例子 ,不 太 弟 用 的 <address> 元 条 并 不 适合 标注 邮 
政 地 址 【尽管 address 是 “地 址 ”的 意思 )。 实 际 上 ， 这 个 元 素 只 有 一 个 目的 ， 即 提供 HTML 文 档 
作者 的 联系 信息 ， 比 如 电子 邮件 地 址 或 网 站 链接 : 
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Our website is managed by: 

«address» 

«a href-"mailto:jsolo8mysite.com"»John Solo«/a», 

«a href-"mailto:lchengümysite.com"»Lisa Cheng«/a», and 
«a href-"mailto:rpavaneümysite.com"»Ryan Pavanec/a». 
«/address» 


再 比如 ，<cite> 元 系 的 含义 也 不 一 样 了 。 当 然 , 像 下 面 这 样 引 用 某 些 作 品 ( 如 新 闻 、 文 章 、 
BIT H ) 还 是 可 以 的 : 


«p»Charles Dickens wrote <cite>A Tale of Two Cities</cite>.</p> 


可 是 ， 现 在 用 cite> 去 标注 人 和 名 已 经 不 对 了 。 这 个 变化 最 终 导 致 了 令 人 意 想 不 到 的 争议 ， 
为 以 前 是 可 以 这 么 用 的 。 一些 “骨灰 ”级 的 Web 开 发 人 员 公 开发 表 言 论 , 或 动人 们 不 用 遵守 <cite> 
的 新 使 用 规则 。 这 可 真 让 人 有 点 菲 夷 所 思 ， 毕 苋 你 一 非 子 能 在 编辑 网 页 的 时 候 看 见 几 回 <cite> 元 
素 啊 ? 

对 用 于 创建 链接 的 <a> 元 素 的 调整 幅度 相对 更 大 一 些 。HTML 以 前 的 版 本 允许 用 <a> 元 素来 标 
注 可 以 单 击 的 文本 或 图 像 。 而 在 HTMLS 中 ， 可 以 在 <a> 元 系 中 放置 任何 东西 ; 就 是 说 ， 你 在 里 面 
放 上 一 大 上 段 文学 、 一 个 列表 、 儿 幅 图 像 …… 都 没有 问题 。( 如 采 你 真 这 么 做 ， 那 就 会 发 现 里 面 的 
所 有 文本 都 会 变 成 赣 色 并 市 有 下 划 线 ， 而 图 像 则 会 产生 蓝 色 的 边框 。) Web 浏 览 硕 文 持 这 种 做 法 
已 经 有 很 多 年 了 ，HTMLS 只 不 过 是 把 这 种 行为 写 进 了 规范 ， 即 便 这 种 用 法 没什么 大 用 处 ， 但 毕 
竟 已 经 列 人 了 标准 。 

还 有 一 些 调 整 在 目前 所 有 浏览 硕 中 都 还 未 得 到 文 持 。 例 如 ，*<ol1> 元 际 CHIPZU ) 现在 有 了 
一 个 reversed 属 性 ， 用 于 反 转 序 扎 〈 下 到 1 或 其 他 通过 start 属 性 设置 的 正 序 时 的 起 始 值 )。 不 过 ， 
这 个 属性 还 没有 浏览 硕 文 持 。 

在 学 习 本 书 的 过 程 中 ， 我 们 还 会 陆续 介绍 其 他 一 些 被 调整 了 使 用 规则 的 元 素 。 


1.5.5 ”标准 化 的 元 素 


HTML5 还 把 一 些 浏览 硕 实 际 文 持 ， 但 并 没有 得 到 之 前 的 HTML 或 XHTML 规范 承认 的 元 素 加 
入 了 标准 。 其 中 最 广为人知 的 一 个 元 素 就 是 <embped> ， 这 个 元 素 在 目前 的 网 页 中 得 到 了 普遍 使 用 ， 
成 为 了 一 种 向 页 面 中 加 入 插件 的 通用 方法 。 

另 一 个 新 元 素 是 wbr> ， 表 示 可 以 在 某 处 断 行 。 换 句 话 说 ， 如 采 某 个 词 太 长 了 ， 一 行 放 不 下 ， 
那 浏览 器 就 会 在 <wbzr> 标 注 的 地 方 断 开 : 

«p»Many linguists remain unconvinced that 

«b»supercali«wbr»fragilistic«wbr»expialidocious«/b» is indeed a word.«/p» 


如 果 需 要 在 小 空间 〈 如 表格 单元 或 小 方块 ) 里 放 长 名 字 《〈 比 如 编程 谨 言 中 的 变量 名 )， 可 以 
用 <wbr> 来 标注 可 以 在 名 字 的 什么 地 方 断 行 。 不 过 ， 即 使 浏览 硕 文 持 cwbr>， 它 也 只 会 在 相应 空间 
威 不 下 长 名 字 时 才 会 断 行 。 对 于 前 面 的 标记 ， 在 浏览 带 中 有 可 能 看 到 以 下 三 种 情况 : 
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Many linguists remain 
unconvinced that 
supercalifragilisticexpialidocious 
is indeed a word. 


Many linguists remain 
unconvinced that 
supercalifragilistic 
expialidocious is indeed a 
word. 


Many linguists 
remain 
unconvinced 
that supercali 
fragilistic 
expialidocious 
is indeed a 
word. 


Visl«wbx», MRLN EPRE nobros CHI BS IEEE ART TRIB ZISTHABUA EE ALE UB 
JF). IHYEHTMLSZ BU, «wbr»— ELSPTEZS-AEBRNIEBUJUSS ETE, EUR A OU EAEL E o 











1.06 今天 开始 用 HTML5 


如 前 所 述 ，HTMLS 是 一 个 奇特 的 混合 体 。 在 让 某 些 不 受 约束 的 HTML 规则 重 现 生 机 C 并 得 以 

标准 化 ) 的 同时 ，HTML5 还 引入 了 一 些 只 有 少数 最 新 浏览 大 才 支 持 的 前 沿 功 能 。 

在 考虑 莱 容 性 的 情况 下 ， 可 以 将 HTML5 的 功能 归 入 以 下 三 类 ，。 

口 己 经 可 用 的 功能 。 包括 那些 以 前 就 得 到 了 很 好 的 支持 , 但 并 末 列 和 人 HTML 标 准 的 功能 (如 
拖 放 )。 此 外 ， 还 包括 只 要 额外 做 点 工作 就 能 在 比较 老 的 浏览 硕 中 使 用 的 功能 ， 比 如 第 2 
章 将 要 介绍 的 语义 元 素 。 

O 平稳 退化 的 功能 。 例 如 ，<video> 元 系 提 供 了 一 种 后 备 机 制 ， 可 以 为 老 的 浏览 如 提供 替代 
内 容 〈 比 如 使 用 Flash 插 件 的 视频 播放 需 )。( 只 显示 一 条 错误 消息 就 很 不 礼貌 了 ， 不 能 成 
为 平稳 退化 的 模范 ! ) 这 一 类 还 包括 一 些 非 本 质 的 装饰 性 功能 ( 例如 表单 中 的 占 位 符 文本 ， 
以 及 像 圆 角 和 投影 之 类 的 CSS3 属 性 )， 较 老 的 浏览 需 完 全 可 以 忽略 它们 。 

口 需要 借助 JavaScript 的 功能 。 很 多 HTML5 的 新 功能 都 源 自 Web 开 发 人 员 费 尽心 机 做 出 来 
的 东西 。 因 此 ，HTML5 中 的 某 些 功 能 完全 可 以 使 用 优秀 的 JavaScript 库 来 实现 (最 差 的 
情况 , 完全 通过 手工 编写 JavaScript 代 人 码 也 可 以 写 出 来 ), 这 一 点 也 不 奇怪 ,通过 JavaScript 
来 实现 这 些 功能 很 费事 儿 ， 如 果 你 党 得 哪 项 功能 很 重要 ， 需 要 用 JavaScript 来 实现 ， 那 么 
就 先 对 所 有 人 都 使 用 该 实现 , 等 HTMLS 中 相应 的 功能 可 以 使 用 了 , 再 使 用 HTML5S 提 供 的 
功能 。 

本 书 假 定 读者 都 希望 毫 无 后 顾 之 忧 地 使 用 HTMLS; 换 名 话说， 就 是 使 用 上 面 第 一 类 功能 。 

如 果 某 个 功能 是 其 他 两 类 中 的 〈 很 多 时 候 会 遇 到 这 个 问题 )， 那 具体 怎么 办 就 看 你 自己 了 : ZA 
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BA MEREN SIL T E REN V d JJ R, 要 么 再 耐心 等 上 一 段 时 间 , 同时 作 好 准备 迎接 新 
功能 普遍 可 用 的 那 一 天 。 如 末 恰 好 有 一 个 不 错 的 JavaScript 方 案 , 本 书 也 会 告诉 你 。 不 过 , 很 多 情 
况 下 你 也 不 得 不 在 请 人 的 新 功能 和 普遍 兼容 之 间作 出 艰难 的 选择 。 





1.6.1 了 人 解 浏览 器 支持 情况 


到 底 能 使 用 哪些 HTML5 的 功能 ， 最 终 还 是 由 浏览 疾 开 发 商 说 了 算 。 如 果 它 们 不 支持 某 个 功 
能 ， 无 论 标 准 里 怎么 说 ,最终 还 是 不 能 用 。 SAR, 主流 的 浏览 疾 差 不 多 有 四 五 个 (不 包括 智能 手 
机 、iPad 等 能 上 网 的 设备 中 的 移动 浏览 器 )。 作 为 个 体 , 没有 几 个 Web 开 发 人 员 能 自己 完全 测试 每 
个 浏览 需 的 每 一 项 功能 ， 更 不 用 说 检测 那些 还 被 很 多 人 使 用 的 老 浏览 需 的 文 持 情况 了 。 

好 在 ， 有 一 个 网 站 一 一 http:/caniuse.com 可 以 大 我 们 。 这 个 网 站 可 以 详细 地 列 出 每 一 款 主流 
浏览 磊 对 HTML5 的 文 持 情况 。 更 重要 的 是 ， 它 还 能 让 你 针对 实际 需要 的 功能 查询 浏览 带 。 下 面 
是 这 个 网 站 的 使 用 指南 。 

(1) 首先 ， 在 页 面 顶部 ， 通 过 复 选 框 选择 你 想 查询 的 一 项 或 多 项 功能 (图 1-4 )。 

可 以 在 页 面 顶部 的 搜索 框 中 输入 某 个 具体 的 功能 。 或 者 ， 也 可 以 通过 在 Category (类 别 ) 框 
中 的 复 选 框 中 选择 ， 来 查询 某 一 类 功能 〈 此 时 会 看 到 包含 所 有 子 功 能 的 兼容 情况 表格 )。 比 如 ， 
单 击 HTML5 并 清除 其 他 复 选 框 ， 可 以 看 到 HTML5 标 准 中 规定 的 功能 。 选 择 JS API 可 以 看 到 那些 
依赖 JavaScript 的 功能 ， 这 些 功 能 一 开始 属于 HTML5，, 但 后 来 义 被 妙 离 了 出 来 。 而 选择 CSS 可 以 
看 到 浏览 器 对 CSS3 功 能 的 支持 情况 。 











储 这 里 输入 要 查询 的 功能 图 1-4: 这 张 图 显示 的 是 
搜索 HTML5 核 心 功能 ， 
-— er 考虑 所 有 浏览 器 的 所 有 
border-radius, WebGL, woff etc 
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(2) 此 外 ， 通 过 其 他 复 选 框 来 设置 其 他 选项 

通过 其 他 选项 ee 比如 ,可 以 去 摊 移 动 浏览 融 或 者 还 在 开 
Rob WR ESCOLAR ER. 不 过 ， 最 简单 的 方式 莫 过 于 保持 这 些 选 项 都 选中 ， 因 为 
包含 所 有 信息 的 表格 仍然 很 容易 看 清 

(3) I] FRJ, UE REIS ) 

如 果 你 同时 查询 了 很 多 功能 ， 那 么 每 次 只 会 看 到 20 个 表 。 单 击 页 面 底部 “Show next 20” 8t 
接 可 以 打开 下 一 页 。 

在 每 个 功能 的 表格 中 ,都 会 包含 一 组 不 同 的 浏览 姨 版 本 。 表 格 中 用 单元 格 的 颜色 表示 对 功能 
的 文 持 情况 : 红色 表示 不 文 择 ， 浅 绿色 表示 文 择 ， 橄 槛 绿色 表示 部 分 文 择 ， 灰 色 表 示 不 确定 (一 
般 是 因为 浏览 姨 的 当前 版 本 还 在 开发 过 程 中 ， 相 应 功能 还 没有 加 入 )。 























有 多 少 人 使 用 支持 这 个 功能 的 浏览 器 1-5. 在 写作 本 书 时 ， 
HTML5 类 中 只 有 20 个 
与 当前 功能 有 关 的 资源 链接 功能 表 '。 图 中 的 表格 显 
示 了 浏览 器 对 HTML5 
Global user stats”: 中 新 的 <audio> 元 素 的 支 
Support: 39.27% 持 情 况 


Method of playing sound on webpages (without requiring a plug-in) Partial support 0.11% 
Total: 39.38% 








# Audio element - working Draft 


Resources: HTMLS Doctor article 
Detailed article on video/audio elements Demos of audio player that uses «audio- 
Detailed article on support File format test page The State of HTML5 Audio 


i | iOS Opera Opera 0-5: 
Firefox Safan Chrome. Opera 4... i pra | 


Two versions back s 3.5 3.2 8.0 10.5 Em 

Previous version x 3.6 4.0 90 10.6 4.0-4.1 10.0 
Current 4.0 10.0 11.0 4.2-4.3 5.0 11.0 
Near future ; 5.0 i 11.0 11.1 

Farther future 10.0 6.0 6.0 12.0 113 


Note: Partial support in Opera refers to support for the HTML5 audio object, not (Mss 
the eldment. 


这 两 个 版 本 的 IE 文 持 audio 


这 两 个 版 本 的 IE 不 支持 audio 





162 浏览 器 装机 情况 统计 
了 解 浏览 器 装机 情况 是 使 用 HTML5 的 另 一 个 要 关注 的 问题 。 这 个 统计 信息 可 以 告诉 你 ， 有 





注 1: 在 翻译 本 书 时 ，HTML5 类 中 有 23 个 功能 表 。( 译 者 注 ) 
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Z V Hj pe m ass o SEIRASEHBJZIBSES W, UAA LIT) GlobalStatsy ji: http://gs. 
statcounter.com。 打 开 网 站 后 ， 在 (位 于 折线 图 下 面 的 ) Statistic 下 拉 列 表 中 选择 Browser Version. 
然后 ， 看 到 图 表 不 仪 包含 正在 使 用 的 浏览 妖 ， 而 且 还 有 每 个 浏览 瘟 的 不 同 版 本 。 还 可 以 从 
Country/Region 下 拉 列 表 框 中 选择 一 个 地 区 ， 比 如 North Americas 





IE 真 的 党 后 了 吗 

在 探索 HTML5 的 过 程 中 ， 你 会 发 现 有 一 个 浏览 器 对 HTML5 的 支持 最 弱 (而 且 升 级 的 速度 
也 最 慢 ), 这 个 落后 的 家 伙 就 是 Internet Explorer, E E Internet Explorer 9 已 经 到 出 了 巨大 
的 步伐 ， 但 与 其 他 现代 浏览 器 相 比 ，IE 对 HTML5 的 支持 仍然 是 最 不 好 的 。 

微软 并 非 不 重视 开发 HTMLS 的 功能 ， 而 是 被 很 多 尚未 完成 的 开发 任务 拖 了 后 腿 。 对 有 些 
HTMLS 功 能 ， 微 软 提 供 了 实验 性 的 了 正 扩 展 〈《 叫 做 HIML5 LABS )， 可 以 从 http:/htmlSlabs. 
interoperabilitybridges.com 下 载 。 如 果 你 只 想 体验 一 下 还 在 开发 中 的 HTML5 功 能 ， 使 用 这 些 扩 
展 没 有 问题 。 但 如 果 要 在 实际 的 Web 应 用 中 使 用 这 些 功能 ， 这 些 扩展 完全 指望 不 上 。( 当然 ， 
在 正中 实现 这 些 功能 的 想法 本 身 就 不 切实 际 ， 不 过 这 就 是 另 一 个 话题 了 。) 

除 此 之 外 ,IE 对 HTML5 的 支持 还 存在 一 个 更 大 的 问题 。 刚 才 提 到 过 ,微软 是 从 IE9 才 开始 
支持 HTMLS 功 能 的 。 而 IE9 只 能 安装 在 Windows 7 或 Windows Vista E, 使 用 Windows XP ( & 
然 已 经 很 老 了 ,但 仍然 还 是 世界 上 用 户 最 多 的 操作 系统 ) 的 人 不 能 使 用 IE9， 所 以 也 就 不 可 能 
得 到 任何 HTMLS 的 支持 。 尽 管 这 些 已 经 落伍 的 人 不 一 定 与 HTMLS 无 缘 (他 们 也 会 使 用 别 的 
浏览 器 )， 但 在 Web 开 发 人 员 抛 弃 功 能 检测 和 变通 方案 完全 转向 HTML5S 之 前 ， 还 有 很 长 的 一 
段 路 要 走 。 


通过 图 表 右 下 角 的 选项 按钮 ， 可 以 选择 图 形 的 类 型 。 点 击 Bar， 可 以 切换 为 用 条 形 图 显示 当 
前 状态 。 选 择 Line， 可 以 看 到 以 折线 岁 显 示 的 随时 间 推 移 浏 览 锅 效 机 情况 的 变化 趋势 。 默 认 情 况 
下 ,折线 图 显示 的 是 之 前 一 整 年 的 情况 ( 图 1-6 )。 通 过 点 击 Time Period 右 侧 的 日 期 ， 可 以 日 定 义 
起 止 时 间 。 

GlobalStats 每 天 都 通过 它 遍 布 数 百 万 网 站 的 跟踪 代码 来 生成 统计 信息 。 虽 然 涉及 的 页 面 量 巨 
大 ， 数 据 量 也 非常 大 , 但 总 归还 是 整个 Web 的 一 小 部 分 。 换 句 话 说 ， 你 不 能 假定 目 己 的 网 站 访客 
都 使 用 相同 的 浏览 硕 。 

更 进一步 ， 浏览 硕 净 机 份额 还 会 随 用 户 所 在 国家 和 网 站 类 型 而 变化 。 比 如 ， 德 国 60% 的 用 户 
使 用 Firefox,， 位 居 第 一 ; 而 在 日 俄罗斯 ，Opera 则 以 49% 的 份额 摘 得 桂冠 。 在 访问 TechCrunch 网 站 
(计算 机 极 客 最 喜欢 的 新 闻 网 站 ) 的 用 户 中 , 仅 有 不 到 16% 的 用 户 使 用 Internet Explorer， 而 正在 世 
界 范 围 内 却 是 绝对 的 霸主 。 所 以 说 ， 要 想 设 计 符 合 目 己 用 户 需 求 的 网 站 ， 就 必须 以 你 目 己 的 页 面 
生成 的 统计 信息 作为 依据 。( 如 果 你 还 没有 在 自己 的 站 点 中 使 用 网 页 跟踪 服务 ， 我 推荐 你 使 用 最 
好 用 而 且 免 费 的 Google Analytics: www.google.com/analytics. ) 
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图 1-6: X i E] zx BH 
由 | KS] http://gs.statcounter.com/sbrowser ver O ~ 8G X E) Top 12 Browser Versions fr.. 7. Je EHE 的 " js E 度 x 
不 乐观 ， 目 前 世界 上 用 

户 最 多 的 IE8 根 本 不 支 
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1.6.3 ”通过 Modernizr 检 测 功能 


今后 儿 年 , 总 会 有 一 些 访客 的 浏览 大 不 支持 HTML5, 这 是 事实 。 但 这 并 不 影响 你 使 用 HTMLS 
的 功能 ， 前 提 是 你 要 甘心 多 花 点 时 间 进 行 一 些 变通 或 创建 一 个 平稳 退化 的 方案 。 不 管 怎样 ,肯定 
都 离 不 开 JavaScript 代 码 的 帮助 。 典 型 的 模式 是 : 加 载 页 面 , 通过 脚本 检测 某 个 具体 的 功能 是 否 可 
用 。 

遗憾 的 是 ， 由 于 HTML5 本 质 上 是 一 个 松散 的 相关 标准 的 集合 ， 因 此 不 可 能 通过 一 次 测试 就 
能 验证 所 有 功能 。 相 反 ， 为 了 检测 不 同 的 功能 ， 必 须 分 别 运行 各 种 不 同 的 测试 一 一 其 至， 有 了 时候 
还 会 测试 浏览 硕 是 否 文 持 某 项 功能 的 某 个 部 分 ， 而 测试 速度 会 非常 快 。 

检测 支持 通常 需要 检查 某 个 可 编程 对 象 的 属性 ， 或 者 创建 一 个 对 象 并 以 特定 的 方式 使 用 它 。 
不 过 ,在 按照 这 种 思路 编写 测试 代码 之 前 ,一定 要 三 思 而 行 ; 因为 弄 不 好 ， 可 能 会 非常 麻烦 。 比 
如 ， 由 于 种 种 原因 ,你 的 测试 代码 在 某 些 浏览 硕 上 总 是 失败 ， 或 者 过 不 了 多 入， 又 要 重 写 测试 代 
人 码 。 所 以 ,我 建议 你 使 用 Modernizr( www.modernizr.com )， 它 是 一 个 小 巧 的 、 持 续 更 新 的 工具 ， 
专门 用 于 测试 浏览 棍 对 很 多 HTML5 及 相关 功能 的 支持 情况 。 如 果 你 想 使 用 新 的 CSS3 功 能 ， 本 书 
8.1.3 节 还 将 介绍 一 个 实现 后 备 文 持 的 绝妙 技巧 。 

在 页 面 上 使 用 Modernizr 的 方法 如 下 。 

(1) 找到 Download Modernizr 区 域 ， 单 击 其 中 的 Development 按 钮 ， 下 载 Modernizr 的 JavaScript 
Xt. 

通常 ， 下 载 后 的 文件 名 类 似 于 modernizr-2.0.6.js; 实际 的 名 字 取 决 于 你 使 用 的 版 本 。 有 的 开 
发 人 员 会 重新 命名 这 个 文件 ,不 让 它 包含 版 本 号 ( 比如 , modernizr.js )。 这 样 , 将 来 在 更 新 Modernizr 
脚本 文件 时 ， 就 不 必 和 更 修改 页 面 中 引用 的 文件 名 了 。 
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提示 “完整 的 Modernizr 脚 本 还 是 手 大 的 。 这 个 文件 只 是 为 了 方便 你 在 开发 网 站 期 间 进 行 测试 。 
而 在 开发 完成 一 切 就 绪 后 ， 你 可 以 删除 Modernizr 脚 本 中 多 余 的 代码 ， 只 留 下 那些 测试 你 
所 用 功能 的 代码 即 可 。 但 这 不 用 你 自己 手工 删除 , 你 可 以 单 击 Download Modernizr 区 域 中 
的 Production 按 钮 , 然后 在 打开 的 页 面 中 , 可 以 通过 点 击 选择 要 检测 的 功能 ( 点 击 复 选 框 )， 
然后 创建 适合 你 自己 的 版 本 ( 点击 Generate 按 钮 )。 





(2) 把 下 载 到 的 文件 放 在 你 的 网 页 所 在 的 文件 夹 中 。 

或 者 ， 放 在 一 个 子 文件 夹 中 也 可 以 ， 然 后 修改 引用 该 JavaScript 文 件 的 路 径 ( 见 下 一 步 )。 
(3) 在 页 面 的 <head> 区 块 中 添加 对 这 个 JavaScript 文 件 的 引用 。 

下 面 就 是 代码 片段 的 示例 : 


<head> 
«meta charset-"utf-8"» 
«title»HTML5 Feature Detection«/title» 
«script src-"modernizr-2.0.6.js'"»«/script» 








«heads 

这 样 ， 当 页 面 加 载 后 ，Modernizr 脚 本 就 可 以 运行 了 。 它 能 够 在 短 短 的 数 毫 秒 时 间 内 检测 很 
多 新 功能 ， 然 后 创建 一 个 名 叫 Modernizr 的 新 JavaScript 对 象 ， 检 测 结果 就 保存 在 这 个 对 象 里 。 通 
过 检测 这 个 对 象 的 属性 ， 就 可 以 知道 浏览 器 具体 支持 什么 功能 。 





提示 “要 了 解 Modernizr 能 够 检测 的 所 有 功能 ， 以 及 需要 检测 的 JavaScript 对 象 的 所 有 属性 ， 请 参 
考 相 关 文 档 ， 地 址 为 www.modernizr.com/docs。 





(4) 编写 脚本 检测 你 想 使 用 的 功能 ， 然 后 执行 相应 的 操作 。 
例如 ， 要 检测 浏览 希 是 否 文 持 HIMLS 的 拖 放 功 能 ， 并 将 检测 结果 显示 在 页 面 上 ， 可 以 使 用 
以 下 代码 : 


«IDOCTYPE html» 
«html lang= en > 
<head> 
«meta charset-"utf-8"» 
«title»HTML5 Feature Detection«/title» 
«script src-"modernizr-2.0.6.js"»«/script» 
</head> 








<body> 
<p>The verdict is... <span id="result"></span></p> 


<script> 
// 找 到 页 面 中 用 以 显示 结果 的 元 素 (id 为 result) 


var result = document.getElementById("result"); 
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if (Modernizr.draganddrop) { 
result.innerHTML = "Rejoice! Your browser supports drag-and-drop."; 


} 
else { 
result.innerHTML = "Your feeble browser doesn't support drag-and-drop."; 


</script> 
</body> 


</html> 
图 1-7 显 示 了 结 


| EI: 虽然 这 个 例子 展示 了 检测 功能 的 正确 方法 ， 
(—|B]FestureDetecionhm| — D - 9x] 介 wS | 但 使 用 功能 的 方式 不 怎么 理想 。 与 其 直接 告诉 你 
€ HTML5 Feature Detection — x| 的 访客 他 们 的 浏览 器 不 支持 这 个 功能 ， 远 远 不 如 
实现 一 个 后 备 方 案 ( 即使 结果 不 如 使 用 HTMLS 功 


The verdict is... Rejoice! Your browser supports drag-and- 


drop. 能 那么 好 )， 甚 至 不 如 简单 地 忽略 这 个 问题 ( 如 果 
相应 的 功能 只 是 为 了 实现 某 个 装饰 性 的 效果 ， 有 
没有 它 还 不 是 无 所 谓 ) 





提示 “这 个 例子 中 使 用 了 一 种 久负盛名 的 基本 JavaScript 技 术 一 一 根据 ID 查找 元 素 并 修改 其 内 
容 。 如 果 你 觉得 这 个 例子 不 好 理解 ， 建 议 你 先 看 一 看 附录 了 中 关于 JavaScript 的 入 门 


知识 。 


1.6.4 使 用 “ 腊 子 脚本 ”填补 功能 缺陷 


Modernizr 可 以 大 你 找 出 浏览 硕 文 持 上 的 缺 聊 。 它 会 在 某 个 功能 不 可 用 时 提醒 你 ， 但 除 此 之 
外 不 会 帮 你 弥补 这 些 缺 陷 。 而 这 正 是 我 们 要 介绍 的 腻子 脚本 ( polyfill ) 的 用 途 所 在 。 从 根本 上 说 ， 
用 子 脚本 就 是 一 大 堆 五 花 八 门 的 技术 ， 目 的 怠 是 填 平 旧 浏 览 硕 对 HTMLS 文 持 上 的 缺陷。 更 文 单 
词 polyfill 源 目 英 国 一 种 腊 子 粉 ， 而 肛 子 粉 就 是 在 刷 墙 漆 之 前 用 来 填补 增 面 裂 颖 和 漏洞 的 〈 肛 子 粉 
在 美国 叫 spackling paste )。 在 HTML5 中 ， 理想 的 腻子 脚本 可 以 直接 放 到 页 面 中 使 用 , 不必 多 做 和 额 
外 的 工作 。 然 后 ， 这 些 脚 本 就 能 无 颖 地 保持 癌 后 兼容 ,而 是 一 点 都 不 唐 突 ， ERER ATTA 
想 变 通 方 案 时 就 能 用 上 纯粹 的 HTML5。 

不 过 , 磋 子 脚本 并 不 完美 。 有 些 腻 子 脚 本 依赖 的 技术 同样 得 不 到 普 裔 支持 。 例如 , 有 一 个 “用 
子 脚 本 ”可 以 通过 Silverlight 插 件 在 老 版 本 的 Internet Explorer 中 模拟 HIMLS 的 <canvas>。 而 假如 
访客 不 愿意 安 疙 Silverlight, 那 你 还 得 考虑 一 种 后 备 方案 。 还 有 一 些 肘子 脚本 实现 的 功能 比 HTML5 
规定 的 功能 少 一 些 , 或 者 性 能 上 要 差 一 点 。 
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fs FH Google Chrome Frame 改 造 IE 





PRAKATA, 3fR3EGoogle Chrome Frame $% Google Chrome Frame 是 针对 IE6、 
IE 7, IE 8, IE 9 开发 的 一 个 播 件 。 这 个 插件 的 原理 是 在 下 浏览 器 中 运行 Chrome 浏 览 器 ， 并 用 
后 者 处 理 HTMLS 页 面 。 但 Chrome Frame 也 不 是 所 有 HTML5 页 面 都 处 理 。 必 须 是 网 站 开发 人 员 
在 页 面 中 加 入 一 些 信息 ， 明 确 告诉 它 可 以 处 理 时 ， 它 才 会 接手 。 

Chrome DS 问题 就 是 用 户 必须 安装 它 ， 网 站 才能 使 用 它 。 而 既然 用 户 可 以 安装 
Chrome Frame， 那 又 为 什么 不 直接 使 用 Chrome 浏 览 器 呢 ?” 不 过 ， 如 果 你 对 Chrome Frame 还 很 
好 奇 ， 可 以 参考 谷歌 公司 的 文档 : http://code.google.com/chrome/chromeframe/。 

有 时 候 ， 本 书 会 告诉 你 茶 个 腻子 脚本 可 以 考虑。 假如 你 想 了 解 更 多 的 信息 ,可 以 在 GitHub 
上 找到 最 相关 的 信息 ， 乃 至 各 种 HIMLS 腻 子 脚 本 的 完整 集合 ， 页 面 地 址 为 : 
http://tinyurl.com/polyfill。 不 过 我 还 要 提醒 一 句 : 这 些 腻子 脚本 在 品质 、 性 能 和 支持 等 方面 有 
着 非常 大 的 差异 。 


提示 “ 光 知 道 针 对 HTMLS 的 某 项 功能 有 一 个 腊 子 脚本 还 不 够 。 在 自己 的 网 站 中 实际 地 使 用 它们 
ep a a. 事先 掌握 它们 的 实际 运行 效果 。 








浏览 硕 装 机 统计 信息 、 功 能 检测 再 加 上 腻子 脚本 ， — T JR, WIDE 


怎么 应 用 HTML5 功 能 了 。 下 一 章 ， 我 们 将 迈 出 第 一 步 ， 介 绍 一 些 在 新 、 旧 浏览 各 中 都 能 使 用 的 
HTML5 元 素 。 


1.6 今天 开始 用 HTML5 | 29 





构造 网 页 的 新 万 式 


ME 网 站 发 生 了 天 翻 地 履 的 变化 。 不 过 ， 最 让 人 叹为观止 的 ， 
还 不 是 web 的 变化 有 多 大 ， 而 是 最 古老 的 HTML 元 素 到 今天 依然 被 沿用 着 ! FXE, 
Web 开 发 人 员 在 构建 现代 网 站 时 使 用 的 HTML 元 素 ， 与 10 年 前 构建 网 站 时 使 用 的 HTML 元 素 别 无 
二 致 。 

有 一 个 元 素 特别 值得 一 提 ， 那 就 是 温和 谦 茶 的 cdiv>( division， 分 区 ) 元 素 ， 它 堪 称 每 一 个 
现代 网 页 的 柱石 。 利 用 <div> 元 素 ， 可 以 把 整个 HTML 文档 分 隔 为 页 眉 、 侧 边 面 板 、 导 航 条 ， 等 
等 。 再 辅 以 少量 可 徘 的 CSS， 就 可 以 把 这 些 区 块 转换 成 带 边 框 的 盒子 或 市 阴影 的 分 栏 ， 而 且 各 就 
各 位 。 

这 种 <div> 加 样式 的 技术 既 人 简明 又 强大 ， 还 非常 灵活 一 一 但 不 够 透明 。 这 人 句 话 的 意思 是 ， 在 
查看 别人 的 源 代 码 时 ， 必 须 费 点 劲 才能 知道 哪个 cdiv> 表 示 什 么 ， 而 整个 页 面 又 是 怎么 搭建 起 来 
的 。 为 了 理解 页 面 的 构造 ,不 得 不 在 标记 、 样 式 表 和 浏览 硕 的 实际 页 面 之 间 跳 来 转 去 。 特 别 是 在 
破解 别人 编写 的 不 怎么 符合 最 佳 实践 的 页 面 时 ， 即 便 你 也 在 自己 的 网 站 中 应 用 了 同样 的 设计 技 
术 ， 也 少不了 会 面 对 这 种 困惑 。 

这 种 情况 引发 了 人 们 的 思考 。 是 不 是 可 以 用 更 好 的 东西 来 代替 <div>? 这 种 东西 需要 发 挥 
与 <div> 一 样 的 作用 ， 但 却 能 传达 出 更 多 的 语义 。 而 且 ， 要 能 够 把 侧 边 栏 与 页 眉 分 开 ， 以 及 把 
广告 条 与 菜单 分 开 。HTMLS 为 此 引用 了 一 组 构造 页 面 的 新 元 素 ， 实 现 了 Web 开 发 人 员 的 这 一 
凤 愿 。 



































提示 “如果 你 的 CSS 技 能 尘封 已 久 ， 和 急需 温 故 知 新 ， 然 后 才能 看 懂 样 式 表 ， 那 说 明 你 还 没 法 学 
习 这 一 章 。 好 在 附录 人 A 中 包含 一 个 简明 的 CSS 教 程 ， 在 那里 可 以 找到 你 需要 了 解 的 基本 
CSS 和 知识。 


2.1 语义 元 素 


要 想 让 网 页 的 结构 更 清晰 ， 需 要 使 用 HTML5 中 新 的 语义 元 素 ( semantic element )。 这 些 元 素 
可 以 为 它们 标注 的 内 容 赋 也 额外 的 含义 。 
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例如 ， 新 的 time> 元 素 用 于 在 网 页 中 标注 一 个 有 效 的 日 期 或 时 间 。 下 面 就 是 <time> 元 系 最 向 
单 的 用 例 : 

Registration begins on <time>2012-11-25</timey> . 

这 行 代 码 在 网 页 中 呈现 的 结果 如 下 所 示 : 

Registration begins on 2012-11-25. 

最 关键 的 是 要 理解 ，xtime> 元 素 没 有 任何 内 置 的 样式 。 实 际 上 ， 网 页 的 读者 也 没有 办 法 知道 
有 一 个 额外 的 元 素 包 含 了 日 期 。 你 可 以 使 用 样式 表 为 ctime> 元 系 添 加 样式 ， 但 默认 情况 下 ,， 它 包 
含 的 内 容 与 普通 文本 没有 任何 区 别 。 

设计 <time> 元 素 的 用 意 是 让 它 来 包含 一 小 段 信 息 。 不 过 ， 大 多 数 HTML5 的 语义 元 素 可 不 是 
这 样 的 ， 那 些 元 素 的 用 途 是 标识 页 面 中 的 一 个 内 容 区 其。 比如 ，<nav> 元 系 用 于 标识 一 组 导航 链 
接 。 而 <footer> 元 系 用 于 标识 通 稼 放 在 页 面 版 部 的 文 脚 〈 或 页 脚 ) 算 起 来 ， 大概 有 十 几 个 类 似 
的 新 元 系 。 
































注意 ”尽管 语义 元 素 在 HTMLS 的 新 功能 里 不 怎么 起 眼 , 但 它们 的 数量 却 不 少 。HTMLS 新 增 的 大 











所 有 语义 元 系 邦 有 一 个 显 闭 的 特点 : 不 真正 做 任何 事 。 相 对 来 次 ,video> 元 系 则 老 括 了 在 
页 面 中 充当 视频 播放 各 的 全 部 能 力 ( 参见 5.2.2 方 ) 有 读者 可 能 会 问 了 ， 既 然 它 们 不 会 改变 网 页 
的 外 观 ， 那 为 什么 还 要 使 用 这 些 新 元 系 呢 ? 
有 如 下 几 条 理由 。 
O 容易 修改 和 维护 。 解 读 传 统 的 网 页 比较 困难 。 要 想 理解 整体 布局 和 不 同 区 块 的 重要 程度 ， 
必须 得 一 思 一 届 地 看 网 页 的 样式 表 。 但 通过 使 用 HTML5 的 语义 元 素 ， 通 过 标记 就 可 以 传 
达 出 力 外 的 结构 化 信息 。 这 样 ， 等 你 儿 个 月 后 再 回头 修改 网 页 ， 就 不 会 像 以 前 那么 头疼 
了 。 当 然 ， 如 果 是 其 他 人 需要 帮 你 改进 页 面 ， 使 用 语义 元 系 就 显得 更 重要 了 。 
O 无 障碍 性 。 现 代 Web 设 计 的 一 个 重要 主题 ,就 是 让 任何 人 都 能 无 障碍 地 访问 网 页 。 换 句 话 
说 ， 要 让 使 用 屏 硕 阅读 瘟 和 其 他 辅助 工具 的 人 都 能 在 页 面 中 自由 导航 。 目 前 ， 开 发 无 障 
碍 工具 的 公司 还 在 为 兼容 HTML5 而 紧张 地 工作 。 等 他 们 开发 完了 ， 残 疾 人 士 束 可 以 有 更 
好 的 上 网 体验 了 。( 仅 举 一 个 例子 ， 有 了 “nav> 元 素 ， 屏 幕 阅读 器 就 能 够 迅速 返回 导航 区 ， 
进而 找到 网 站 的 链接 。) 

















提示 “要 了 解 针 对 Web 无 障碍 性 的 最 佳 实 践 ， 可 以 访问 WAI (Web Accessibility Initiative, Web 
无 障碍 倡议 ) 的 网 站 : www.W3.org/WAI。 或 者 ， 要 了 解 通过 屏幕 阅读 器 上 网 是 一 种 什么 
样 的 感觉 (同时 理解 为 什么 标题 要 排列 适当 )， 可 以 看 看 YouTube 的 这 段 视 频 : 
http://tinyurl.com/6bu4pe. 





O 搜索 引擎 优化 。 像 谷歌 这 样 的 搜索 引擎 ， 会 使 用 强大 的 搜索 机 器 人 (search bot )， 这 些 搜 
索 机 需 人 上 自动 在 Web 中 怜 行 并 获取 每 一 个 网 页 。 然 后 扫描 网 页 内 容 并 将 它们 索引 到 搜索 数 
据 库 中 。 如 采 谷 歌 能 够 更 好 地 理解 你 的 站 点 ， 那 搜索 者 的 查询 就 会 越 容 易 与 你 的 内 容 匹 
配 , 因 而 你 的 网 站 列 在 搜索 结果 中 的 可 能 性 也 就 越 大 ,搜索 机 磊 人 已 经 在 检查 一 些 HTML5 
的 语义 元 系 了 了 ， 这 样 可 以 收集 到 它们 索引 的 页 面 的 更 多 信息 。 

OQ 未 来 的 功能 。 新 浏 览 需 和 Web 编 辑 工 具 一 定 会 以 这 样 或 那样 的 方式 利用 语义 元 素 。 比 如 ， 
浏览 硕 可 以 提供 一 个 页 面 的 内 容 纲要 ， 以 方便 访客 跳 转 到 页 面 中 适当 的 区 块 ， 就 像 
Microsoft Word 2010 中 的 导航 窗 格 。( 事实 上 ，Chrome 已 经 提供 了 一 个 显示 页 面 纲要 的 插 
件 ， 详 见 2.5.2 节 。) 类 似 地 ， 网 页 设计 工具 也 可 能 会 包含 一 些 方 便 你 构建 或 编辑 导航 菜单 
的 功能 ， 而 方法 就 是 组 织 你 放 在 <nav> 区 块 中 的 内 容 。 

最 关键 的 问题 在 于 ， 如果 你 正确 地 使 用 了 语义 元 素 ， 就 能 够 创建 更 加 清晰 的 页 面 结构 ， 就 能 

够 适应 未 来 的 浏览 融和 Web 设 计 工具 的 发 展 趋势 。 而 如 果 你 还 是 抱 看 原来 写 HTML 标 记 的 老 习 惯 
不 放 ， 那 就 要 跟 未 来 探 肩 而 过 了 。 


2.2 ”改造 传统 的 HTML 页 面 


要 了 解 和 熟悉 新 的 语义 元 素 〈 包 括 学 习 如 何 使 用 它们 来 构造 页 面 )， 最 好 的 方式 莫 过 于 拿 一 
个 经 典 的 HTML 文 档 作 例子 ， 然 后 把 HTML5 的 一 些 新 鲜 营 养 充实 进去 。 图 2-1 是 我 们 要 改造 的 第 
一 个 页 面 。 这 个 页 面 很 简单 ， 只 包含 一 篇 文章， 当然 对 于 其 他 内 容 ( 如 博客 、 产 品 说 明 或 简短 的 
新 闻 报 道 ) 也 完全 没有 问题 。 






























































提示 访问 www.prosetech.com/html5， 可 以 查看 或 下 载 图 2-1 中 的 示例 页 面 以 及 本 章 所 有 的 示例 
页 面 。 如果 你 想 从 头 开 始 做 ， 那 就 选择 ApocalypsePage Original.html， 如 果 想 直接 查看 使 
用 HTML5 改 造 之 后 的 结果 ， 请 选择 ApocalypsePage Revised.html。 


2.2.1 构造 页 面 的 老 办 法 


要 生成 图 2-1 所 示 的 页 面 , 有 很 多 种 构造 方法 。 让 人 高 兴 的 是 , 这 个 示例 页 面 使 用 的 是 HTML 
最 佳 实践 , 因此 没有 任何 通过 标记 来 进行 格式 化 的 痕迹 。 没有 粗 体 或 斜体 元 素 , RARA WFE, 
当然 更 没有 土 得 挥 漆 的 <font> 之 类 的 东西 。 总 之 ， 这 是 一 个 格式 非常 规范 的 页 面 ， 所 有 样式 均 来 
日 外 部 样式 表 。 
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一 级 标题 WE 图 2-1 ; — ^N 3 j iB 的 
3 te = HTML 页 面 ， 具 有 类 似 
A J| ApocalypsePage. Origina.html © ~ > X | -mm wë 文档 的 页 面 结 构 ， 其 中 
的 格式 来 自 一 个 外 部 样 

How the World Could End TUR 


RIGHT NOW, you're probably feeling pretty good. After all, life in the 
developed world is comfortable—probably more comfortable than it's 
been for the average human being throughout all of recorded history. 


But don't get too smug. There's still plenty of horrific ways it could all fall 
apart. In this article, you'll learn about a few of our favorites. 


Mayan Doomsday 

Skeptics suggest that the Mayan calendar simply rolls to a new 5,126-year 
era after 2012, and doesn't actually predict a life-ending apocalypse. But 
given that the long-dead Mayans were wrong about virtually everything 
else, why should we trust them on this? 


Robot Takeover 
Not quite as frighteningas a Vampire Takeover or Living-Dead Takeover, a 
robot be on is still a disquieting SERPEN We are HS outnumbered 


v our technolosical eadceets, and e rate irs the dav his 


Global Epidemic 

Some time in the future, a lethal virus could strike. Predictions differ about 
the source of the disease, but candidates include monkeys in the African 
jungle, bioterrorists, birds and pigs with the flu, warriors from the future, 
an alien race, hospitals that use too many antibiotics, vampires, the CIA, 
and unwashed brussel sprouts. Whatever the source, it's clearly bad news. 


These apocalyptic predictions do not reflect the views of the author. 
About Us Disclaimer Contact Us 
Copyright & 2011 








以 下 是 从 页 面 中 摘出 的 一 段 标 记 ， 代 码 中 加 粗 的 地 方 表明 应 用 了 样式 : 
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«div class-"Header"» 
<h1>How the World Could End«/hi» 
«p class-"Teaser"»Scenarios that spell the end of life as we know«/p» 
«p class-"Byline"»by Ray N. Carnation</p> 

«/div» 


«div class-"Content"» 
<p><span class-"LeadIn"»Right now«/span», you're probably ...«/p» 
<p>...</p> 


«h2»Mayan Doomsday</h2> 
«p»Skeptics suggest ...</p> 
«/div» 
«div class-"Footer"» 
«p class-"Disclaimer"»These apocalyptic predictions ...«/p» 
«p» 
«a href-"AboutUs.html"»About Us«/a» 
«/p» 
«p»Copyright © 2011«/p» 
«/div» 


代码 中 的 省 略 号 是 怎么 回 事 

本 书 不 可 能 把 每 个 示例 的 所 有 标记 都 印 出 来 ， 除非 把 它 扩 充 到 12 000 页 ， 再 毁 掉 一 片 成 材 
林 。 不 过 ,这些 代 码 能 够 展示 出 页 面 的 基本 结构 ， 以 及 所 有 重要 的 元 素 。 为 此 ,代码 中 使 用 了 
省 略 号 (... )， 用 以 表示 省 略 未 印刷 出 来 的 内 容 。 

例如 ， 就 拿 这 段 代 码 来 说 ， 其 中 包含 了 图 2-2 所 示 页 面 主体 中 的 所 有 内 容 ， 只 不 过 省 略 了 
一 些 包含 文字 的 段落 、Manyan Doomsday 后 面 的 条 目 以 及 页 脚 中 的 一 些 链接 。 如 果 你 想 仔 细 观 
囚 页 面 中 的 每 一 处 细节 ， 当 然 没 有 问题 ， 就 在 本 书 试 验 站 点 ( www.prosetech.com/html5 ) 查看 
示例 文件 即 可 。 





在 一 个 ( 像 这 个 一 样 的 ) 编写 规范 的 传统 HTML 页 面 中 , 通过 使 用 cdiv> 和 <span> 元 素 , 已 经 
把 大 部 分 工作 移交 给 了 样式 表 。 通 过 <span> 可 以 为 处 在 其 他 元 系 中 的 少量 文本 添加 样式 ， 而 通过 
<div> 不 仅 可 以 为 整个 内 容 区 块 添加 样式 ， 还 可 以 构建 起 整个 页 面 的 结构 ( 见 图 2-2 )。 

这 个 例子 中 的 样式 表 比 较 简 单 。 整 个 页 面 的 最 大 蜗 度 设置 为 800 像 素 ， 避 人 免 文本 在 宽屏 显示 
关上 显示 得 过 长 。 页 眉 位 于 一 个 刘 蓝 色 边 框 的 盒子 中 , 内 容 区 的 两 侧 都 添加 了 内 边 距 ， 而 页 脚 在 
整个 页 面 底 部 居中 。 

因为 使 用 了 div> 元 素 ， 所 以 添加 样式 很 容易 。 比 如 ， 下 面 承 是 为 页 眉 及 其 中 内 容 添加 样 陈 
的 规则 。 
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图 2-2 : 通过 <div> 元 素 把 
页 面 分 隔 为 三 个 逻辑 区 
XR. 顶部 的 页 眉 、 中 部 
ES PARURE SP BJ Da BA 


developed world is comfortable—probably more comfortable than it's 
been for the average human being throughout all of recorded history. 


But don't get too smug. There's still plenty of horrific ways it could all fall 
apart. In this article, you'll learn about a few of our favorites. 


Mayan Doomsday 

Skeptics suggest that the Mayan calendar simply rolls to a new 5,126-year 
era after 2012, and doesn't actually predict a life-ending apocalypse. But 
given that the long-dead Mayans were wrong about virtually everything 
else, why should we trust them on this? 


m 


Robot Takeover 
Not quite as frighteningas a Vampire Takeover or Living-Dead Takeover, a 
robot rebellion is still a disquieting thought. We are already outnumbered 


ur technolocsical eadcets, and even Rill Gates fears the dav his 


Global Epidemic 

Some time in the future, a lethal virus could strike. Predictions differ about 
the source of the disease, but candidates include monkeys in the African 
jungle, bioterrorists, birds and pigs with the flu, warriors from the future, 
an alien race, hospitals that use too many antibiotics, vampires, the CIA, 
and unwashed brussel sprouts. Whatever the source, it's clearly bad news. 


These apocalyptic predictions do not reflect the views of the author. 
About Us Disclaimer Contact Us 
Copyright & 2011 





/# 为 《div> 添 加 样式 ， 使 其 具有 页 局 的 外 观 〈 蓝 色 带 边框 ) */ 
.Header ( 

background-color: #7695FE; 

border: thin #336699 solid; 

padding: 10px; 

margin: 10px; 

text-align: center; 


3 


/# 为 页 届 中 的 <h1> 添 加 样式 (这 是 文章 的 标题 ) * 
.Header h1 ( 

margin: Opx; 

color: white; 

font-size: xx-large; 


} 
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/# 为 页 届 中 的 子 标 题 添 加 样式 #/ 
.Header .Teaser { 

margin: Opx; 

font-weight: bold; 
j 


/* 为 页 届 中 的 署名 行 添加 样式 */ 
.Header -Byline { 
Tont-style: italic; 
font-size: small; 
margin: Opx; 


你 可 能 注意 到 了 ,这 些 规 则 有 效 利用 了 上 下 文选 择 符 ( 见 A.3.3 市 )。 比 如 ， 用 选择 符 .Header 
h1 选 择 了 页 眉 区 域 中 的 所 有 <h1> 元 素 。 








提示 “附录 A 在 介绍 CSS 时 也 用 到 了 这 个 例子 。 如 果 你 想 知 道 应 用 给 这 个 页 面 的 所 有 样式 规则 , 
可 以 翻 到 A.4 节 。 


2.2.2 ”使 用 HTML5 构造 页 面 


<div> 是 当今 Web 设 计 的 必 备 元 素 , 它 是 一 个 直观 、 多 用 途 的 容 套 ,可 以 通过 它 为 页 面 中 的 任 
何 区 块 应 用 样式 。 但 cdiv> 的 问题 在 于 ， 它 本 刁 不 反映 与 页 面相 关 的 任何 信息 。 在 你 (或 浏览 喜 、 
WEILE. Eiei, TRASH S) 遇 到 一 个 <div> 元 系 时 ， 你 知道 它 是 页 面 中 独立 的 一 个 区 
块 ， 可 是 你 不 知道 那个 区 块 的 意图 。 

要 通过 HTML5 改 进 这 种 情况 ， 可 以 把 cdiv> 蔡 换 成 更 具有 描述 性 的 语义 元 系 。 这 些 语 义 元 系 
的 行为 与 <div> 元 系 类 似 : 它们 仅 包含 一 组 标记 ， 除 此 之 外 没有 其 他 作用 ， 可 以 将 它 作 为 “格式 
挂钩 ”来 为 页 面 应 用 样式 。 不 过 ， 除 此 之 外 ， 它 们 还 会 为 页 面 添 加 一 点 霹 义 。 

下 面 的 代码 是 在 图 2-1 所 示 页 面 基础 进行 了 人 简单 修改 之 后 的 结 有 末 ， 删 除了 两 个 cdiv> 元 素 ， 但 
添加 了 两 个 HTMLS 的 语义 元 素 : <header> 和 <footer>。 


《header class= Header > 
<h1>How the World Could End«/hi» 
«p class-"Teaser"»Scenarios that spell the end of life as we know«/p» 
«p class-"Byline"»by Ray N. Carnation«/p» 

«/header» 

















«div class-"Content"» 
<p><span class-"LeadIn"»Right now«/span», you're probably ...«/p» 
Dress e/ p» 


«h2»Mayan Doomsday«/h2» 
«p»Skeptics suggest ...«/p» 


</div> 
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«footer class-"Footer"» 
«p class-"Disclaimer"»These apocalyptic predictions ...«/p» 
<p> 
«a href-"AboutUs.html"»About Us</a> 
«/p» 
«p»Copyright © 2011«/p» 
«/footer» 


在 这 里 ，xheader> 和 人 <footer> 元 系 蔡 代 了 原来 的 div> 元 素 。 如 果 你 在 修改 一 个 大 型 网 站 ， 可 
以 考虑 用 HTML5 中 相应 的 语义 元 系 来 包装 已 有 的 <div> 元 系 。 

可 能 你 已 经 注意 到 了 ， 这 里 的 cheader> 和 <footer> 元 素 仍 然 使 用 了 类 名 。 这 样 做 的 目的 就 是 
不 用 立即 修改 样式 表 。 可 不 管 怎 么 说 ,这 里 的 类 名 还 是 有 点 多 余 。 所 以 ,最 终结 果 就 是 把 它们 都 
删 挥 . 


<header> 
<h1>How the World Could End«/hi» 
«p class-"Teaser"»Scenarios that spell the end of life as we know«/p» 
«p class-"Byline"»by Ray N. Carnation</p> 

«/header» 


EA] 2 va rjr HA —^P«header»z6zk, BrAnTUL EBSHUXAYeBEUE. TAEA 
«header» KEBE HJ BT 2638 IE FRE CIS AILUU : 


/# 为 <header> 添 加 样式 ， 使 其 具有 页 届 的 外 观 〈 蓝 色 带 边框 ) */ 











header { 

D» 

/# 为 <header> 中 的 <h1> 添 加 样式 (这 是 文章 的 标题 ) */ 
header h1 ( 

€ 


/* 为 <header> 中 的 子 标题 添加 样式 */ 
header .Teaser | 


n 


/# 为 <header> 中 的 署名 行 添加 样式 #/ 

header .Byline { 

J 

这 两 种 应 用 样式 的 方式 都 会 得 到 相同 的 结果 。 正 如 HIML5 中 的 很 多 设计 问题 一 样 ， 可 能 需 
要 充分 地 讨论 ， 但 到 拭 该 怎么 做 ， 没 有 便 性 规定 。 

此 时 ， 也 许 你 会 问 : 为 什么 内 容 部 分 的 <div> 元 素 还 保留 者 呢 ? 这 样 没 有 问题 ， 因 为 HTML5 
页 面 经 常会 混合 各 种 语义 元 素 和 更 通用 的 <div> 容 和 项。HITML5 没 有 “content ”元 素 ， 所 以 仍然 可 
以 使 用 cdiv> 元 素 。 
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注意 这 个 网 页 在 IE9 之 前 的 Internet Explorer 中 无 法 正确 显示 。 为 解决 这 个 问题 ， 可 以 参考 2.3 
节 的 有 关 讨 论 。 不 过 接 下 来 ， 还 是 让 我 们 再 多 接触 几 个 能 够 增强 页 面 的 语义 元 素 吧 。 





最 后 ， 还 有 一 个 元 素 有 必要 用 在 示例 页 面 中 。 那 就 是 HTMLS5 的 article> 元 素 ， 这 个 元 素 
表示 一 个 完整 的 、 目 成 一 体 的 内 容 块 ， 比 如 博客 文章 或 新 闻 报 道 。<atrticle> 元 率 应 该 包含 所 
有 相关 的 内 容 ， 包 括 标 题 、 作 者 署名 以 及 正文 。 添 加 了 article> 元 系 之 后 的 页 面 结构 就 变 成 
如 下 所 示 : 


<article> 
<header> 
<h1>How the World Could End</h1> 


«/header»? 
«div class-" Content"» 


<p><span class-"LeadIn"»Right now«/span», you're probably ...«/p» 


Du 
«h2»Mayan Doomsday«/h2» 


«p»Skeptics suggest ...«/p» 
</div> 
</article> 
<footer> 
«p class="Disclaimer">These apocalyptic predictions ...</p> 
</footer> 
图 2-3 是 最 终 的 页 面 结构 示意 图 
Web Page 图 2-3: 重新 设计 之 后 ， 页 面 中 使 用 了 三 个 新 的 HTML5 语 义 元 素 。 对 于 原 


来 的 页 面 结构 ， 我 们 可 以 理解 为 :“ 这 是 一 个 包含 三 个 区 块 的 页 面 。” 而 对 
carticle» 于 新 的 页 面 结 构 ， 可 以 这 样 想 :“ 这 是 一 篇 包含 文 头 和 页 脚 的 文章 。” 


«footer» 





尽管 此 时 的 页 面 在 浏览 锅 中 看 起 来 还 是 一 样 的 ， 但 后 台 已 经 湾 伏 了 一 些 额外 的 信息 。 此 
时 ， 如 果 正 好 一 个 搜索 机 需 人 造访 你 的 网 站 ， 停 留 在 这 个 页 面 上 ， 那 它 怠 能 迅速 找到 页 面 的 
内 容 (通过 <article> 元 素 ) 以 及 该 内 容 的 标题 (通过 <header> 元 素 )。 至 于 页 脚 ， 它 就 不 会 太 
在 意 了 。 
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注意 ”有 时 候 ， 需 要 把 一 篇 文章 拆 开 ， 分 几 个 页 面 来 显示 。 目 前 关于 这 个 问题 的 处 理 方 案 ， 就 
是 把 文章 的 每 一 部 分 都 放 在 它 自己 的 article> 元 素 中 一 一 即使 内 容 并 不 完整 ， 也 不 是 自 
成 一 体 的 。 在 实际 使 用 语义 元 素 的 时 候 ， 语 义 元 素 与 页 面 表现 之 间 经 常会 发 生 冲 突 ， 这 
只 是 一 个 典型 的 例子 。 


2.2.3 ”用 <hgroup> 标 注 副 标题 


在 前 面 的 例子 中 , 我 们 已 经 让 <header> 物 尽 其 用 了 可是, HTML5 实 际 上 新 增 了 两 个 与 标题 
相关 的 元 素 : 一 个 是 cheader>， 男 一 个 是 chgroup>。 以 下 是 如 何 使 用 这 两 个 元 素 的 规范 做 法 : 

首先 ， 如 果 有 一 个 普通 的 标题 ， 它 本 刁 不 包含 任何 特殊 的 内 容 , 那 使 用 一 个 币 编 号 的 标题 元 
素 ( 即 ch1>、x<h2>、<h3> 等 ) 就 可 以 了 : 

<h1>How the World Could End</h1> 

如 有 果 除 了 主 标题 , 还 有 一 个 副标题 , Ju] ELEC AT IUE TE— 1 «hgroup»2U 2s?» 但 是 ， 
这 里 面 除了 编号 的 标题 元 素 ( 即 ch1>、<h2>、<h3> 等 )， 其 他 任何 元 素 也 不 要 放 : 


<hgroup> 
<h1>How the World Could End</h1> 
«h2»Scenarios that spell the end of life as we know«/h2» 
«/hgroup» 
如 果 文 章 开 头 的 内 容 很 多 一 一 除了 主 标 题 之 外 ， 还 有 其 他 内 容 〈 比如 内 容 摘要 、 发 表 日 期 、 
作者 署名 、 图 片 或 小 标题 链接 等 )， 那 就 应 该 把 它们 都 放 在 一 个 cheadery 元 素 中 。 
«header» 
<h1>How the World Could End«/hi» 
«p class-"Byline"»by Ray N. Carnation«/p» 
«/header» 
最 后 ， 如 果 这 个 文章 开头 中 还 有 一 个 副标题 ， 那 么 除了 把 主 、 副 标题 放 在 <hgroup> 中 ， 还 应 
该 在 外 面 加 上 <header> 元 系 ， 用 以 包含 其 他 内 容 : 
«header» 
«hgroup» 
«h1»How the World Could End«/hi» 
«h2»Scenarios that spell the end of life as we know«/h2» 



































«/hgroup»? 

«p class-"Byline"»by Ray N. Carnation</p> 

«/header» 

当然 ， 这 也 是 在 前 面 例子 的 基础 上 修改 的 结 末 ， 只 不 过 把 文章 的 副标题 放 在 了 <h2> 元 系 而 非 
PICK F o 


Heh ipt, MEAKA ADRIS L MER EVF, RE T RARAS T 
以 二 级 标题 ch2> 开 头 的 小 三 了 ， KEARE, E, ERAEN RERE AS A 
太 说 不 过 去 。 里 然 这 样 不 会 影响 页 面 在 浏览 带 中 呈现 的 结果 , 但 却 会 影响 浏览 带 或 其 他 工具 为 页 
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面 生成 的 文档 纲要 ( document outline, 12.5.27 )。 

好 在 ， 有 <hgroup> 元 素 ， 这 个 问题 就 迎刃而解 了 。 从 结构 上 讲 ， 它 只 关注 顶级 标题 ( 也 就 是 
这 里 的 ch1> )。 其 他 标题 也 会 显示 在 浏览 锅 中 ,但 不 会 被 列 和 人 文档 纲要 。 这 个 结果 是 非常 合理 的 ， 
因为 这 里 的 标题 是 文章 的 副标题 ， 并 不 表示 小 下 的 开始 。 

















2.2.4 ”用 <figure> 添 加 插图 


很 多 页 面 中 都 包含 图 片 。 但 是 ， 插 图 (figure ) 与 图 片 的 概念 还 不 完全 一 样 。HTML5 规 
汇 建 议 我 们 把 插图 想象 成 一 本 书 中 的 附 图 ; 换 句 话说 ,插图 虽然 独立 于 文本 ,但 文本 中 会 提 
AE o 

一 般 来 说 ， 插 图 应 该 是 浮动 的 ; 换 句 话说 ， 应 该 把 它 放 在 相关 文本 劳 边 的 一 个 比较 近 便 
的 位 置 上 (不 要 把 它们 锁定 在 特定 的 词 或 元 系 劳 边 )。 而 且 , 插图 通常 还 会 有 与 之 相伴 的 浮动 
K. 

下 面 是 给 这 篇 启示 录 般 的 文章 添加 搬 图 的 HTML 标 记 。( 其 中 也 包含 正好 在 它 前 面 和 后 面 的 
两 个 段落 ， 这 样 你 就 能 知道 插图 在 标记 中 的 确切 位 置 了 。) 


<p><span class="LeadIn">Right now</span>, you're probably ...</p> 























«div class-"FloatFigure"» 
«img src-"human skull.jpg" alt-"Human skull"» 
«p»Will you be the last person standing if one of these apocalyptic 
scenarios plays out?«/p» 
</div> 


<p>But don't get too smug ...</p> 

光 有 这 些 标记 还 不 行 ， 必 须 还 得 有 相应 的 样式 表 规 则 , A ETUR ELE D Ss AE (同时 
添加 外 边 距 、 控 制图 题 文 本 的 格式 ， 当 然 你 也 可 以 目 己 给 它 添加 一 个 边框 )。 下面 就 是 本 书 给 出 
的 样式 规则 : 


/* 为 质 图 应 用 样式 */ 
.FloatFigure { 
float: left; 
margin-left: Opx; 
margin-top: Opx; 
margin-right: 20px; 
margin-bottom: Opx; 


j 


/* 为 图 题 应 用 样式 */ 

.FloatFigure p { 
max-width: 200px; 
font-size: small; 
Tfontestyule- Italic; 
margin-bottom: 5px; 


} 
图 2-4 展 示 了 目前 这 个 示例 页 面 的 外 观 。 
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PM ew») 网 2-4: 现在 ,我 们 通过 插图 
RS rT FF EM.  ——— 


图 恰好 在 第 一 段 文本 之 后 ， 
How the World Could End bé sche mcd 


的 左 侧 。 注 意 一 下 图 题 文本 
的 宽度 ， 我 们 通过 限制 这 个 


RIGHT NOW, you're probably feeling pretty good. After all, life in the developed world TR 度 ; 让 图 是 内 容 F 示 很 充 
is comfortable—probably more comfortable than it's been for the average human being 


throughout all of recorded history. 实 N 很 优雅 


But don't get too smug. There's still 
plenty of horrific ways it could all fall 
apart. In this article, you'll learn about a 
few of our favorites. 








Mayan Doomsday 
Skeptics suggest that the Mayan calendar 
simply rolls to a new 5,126-year era after 
2012, and doesn't actually predict a life- 
ending apocalypse. But given that the 
long-dead Mayans were wrong about 
gi " -— virtually everything else, why should we 
EN rs trust them on this? 
Wili you be the last person standing 
if one of these apocalyptic scenarios Robot Takeover 
plays out? Not quite as frightening as a Vampire 
Takeover or Living-Dead Takeover, a 
robot rebellion is still a disquieting thought. We are already outnumbered by our 
technological gadgets, and even Bill Gates fears the day his Japanese robot slave turns 











TIR EA B E. EEN NARR, AEUTUSHTMLS R I AREA a F— ^ 39r BG 
XOU. EZAMA DIEA. xtd. DEXCHLn] DLANHEHDIAP ZR BJ«div» 了， 因为 现在 有 了 
一 个 专门 的 <figure> 元 系 。 那 么 图 题 呢 ? PS IP TE«figure» P Hj«figcaption»2025 H : 


«figure class-"FloatFigure"» 
«img STC= human skull.jpg" alt-"Human skull"» 
«figcaption»Will you be the last person standing if one of these 
apocalyptic scenarios plays out?«/figcaption» 

</figure> 


当然 ， 给 插图 和 图 题 应 用 什么 样式 ， 把 它们 放 在 什么 位 置 上 ， 还 是 由 你 说 了 算 。( 对 这 个 例 
子 来 说 ， 你 得 修改 样式 规则 的 选择 符 ， 才 能 重新 选中 图 题 文 本 。 现 在 使 用 的 是 .FloatFigure p, m 
修改 之 后 应 该 是 .FloatFigure figcaption。 ) 














提示 “figure> 元 素 由 于 有 一 个 类 名 (FloatFigure ), 所 以 仍然 会 被 应 用 样式 , 这 与 元 素 名 无 关 。 
使 用 类 名 是 因为 我 们 要 为 不 同 的 播 图 应 用 不 同 的 样式 。 比 如 ， 可 以 让 有 的 播 图 靠 左 浮动 ， 
而 让 有 的 插图 靠 右 浮动 ， 有 的 插图 还 要 应 用 不 同 的 外 边 距 或 图 题 格 式 ， 等 等 。 为 了 保留 
这 种 灵活 性 ， 还 是 有 必要 继续 通过 类 来 为 插图 应 用 样式 。 


打开 浏览 带 看 一 下 ,插图 还 是 那样 ,但 不 同 的 是 标注 插图 的 标记 现在 的 含义 已 经 非常 明确 了 。 
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(顺便 提 个 醒 ，xfigcaption> 元 素 不 是 只 能 包含 文本 一 一 任何 HIML 元 素 都 可 以 ， 比 如 链接 、 小 图 
标 等 。) 

最 后 ， 有 必要 再 说 一 件 事 。 因 为 图 题 中 经 常 束 包含 了 对 图 片 的 完整 说 明 ， 所 以 alt 文 本 就 显 
得 有 点 多 余 了。 这 种 情况 下 ， 可 以 把 cimg> 元 素 中 的 alt 属 性 删除 : 


«figure class-"FloatFigure"» 

«img STC= human_ skull.jpg"» 

«figcaption»A human skull lies on the sand«/figcaption» 
</figure> 


这 里 要 小 心 的 是 ,不 能 把 a1t 文 本 设 成 空 字符 串 。 因 为 这 就 意味 着 你 的 图 片 纯粹 是 装饰 用 的 ， 
屏幕 阅读 器 会 忽略 不 读 。 














2.2.5 用 <aside> 添 加 附注 


新 的 <aside> 元 系 表 示 与 它 周 围 的 文本 没有 密切 关系 的 内 容 。 这 就 是 说 ， 你 可 以 像 在 印刷 品 
中 使 用 附注 栏 一 样 使 用 caside> 元 素 ， 可 以 通过 它 介绍 另 一 个 相关 的 话题 ， 或 者 对 主 文档 中 提出 
的 某 个 观点 进行 解释 。( 比如 , 可 以 直接 翻 到 2.3 方 , 那 就 有 一 个 附注 栏 。) 男 外 , 也 可 以 用 <aside> 
来 威 放 广 告 、 相 关内 容 链 接 ， 甚 至 如 图 2-5 所 示 的 醒 日 引文 (pull quote )。 











图 2-5; 醒目 引文 也 是 从 
印刷 行业 中 们 用 的 技 
We are already 


q : ` jd a xm 
outnumbered by our technological gadgets, and even Bill Gates fears the AN , HT WS | 读者 注 © 
day his Japanese robot slave turns him over by the ankles and asks (in a JJ 突 出 重要 的 内 容 
suitably robotic voice) "Who's your daddy now?" 


Unexplained Singularity 


We don't know how the 6 6 We don 't know 


universe started, so we 


can't be sure it won't just how the un Iverse 


end, maybe today, and 
maybe with nothing more sla rled, so we cun 'L be 


exciting than a puff of anti- 


matter and a slight fizzing sure it won t just en d 
, 


noise. 


Runaway Climate Change maybe tod ay. 9 9 


Dismissed by some, Al 

Gore's prophecy of doom 

may still come true. If it does, we may have to contend with vicious 
storms, widespread food shortages, and surly air conditioning repairmen. 


Global Epidemic 
Some time in the future, a lethal virus could strike. Predictions differ 





HA, EHAR div Rn MAEPA, BH asido nt RAREN, RIVA 
让 标记 更 军 有 意义 : 
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«p»... (in a suitably robotic voice) "Who's your daddy now?"«/p» 


«aside class-"PullQuote"» 
«img STC= quotes start.png" alt-"Quote"» 
We don't know how the universe started, so we can't be sure it won't 
just end, maybe today. 
«img src-"quotes end.png" alt-"End quote > 
«/aside» 


«h2»Unexplained Singularity«/h2» 


这 一 次 ， 样 式 表 把 醒目 引文 浮动 到 了 右边 。 为 满足 你 的 好 奇 心 ， 下 面 给 出 了 相应 的 样式 : 


.PullQuote { 
float: right; 
max-width: 300px; 
border-top: thin black solid; 
border-bottom: thick black solid; 
font-size: 30px; 
line-height: 130%; 
font-style: italic; 
padding-top: 5px; 
padding-bottom: 5px; 
margin-left: 15px; 
margin-bottom: 10px; 


j 


.PullQuote img 1 
vertical-align: bottom; 


j 


2.9 浏览 器 对 语义 元 素 的 文 持 情况 


到 目前 为 止 , 我 们 做 练习 做 得 还 是 很 开心 的 。 不过, 要 是 你 用 一 个 比较 早 的 浏览 器 打开 这 个 
页 面 ， 结 果 恐 伯 就 没有 那么 邻 人 满意 了 。 在 讨论 这 些 内 容 之 前 ， 有 必要 先 了 解 一 下 哪些 浏览 絮 支 
持 这 些 人 简单 的 语义 元 素 。 表 2-1 列 出 了 支持 的 浏览 胡 。 


表 2-1 文 持 语义 元 素 的 浏览 器 
IE Firefox Chrome Safari Opera Safari iOS Android 
iK 9 4 8 5 11.1 4 2.1 


























PZE, B XOURMSE— T ERRIRE ETE, boire bendi 有 
支持 它们 ， 只 要 让 浏览 器 把 它们 当做 普通 的 <div> 元 素 就 行 了 。 为 了 做 到 这 一 点 ， 需 要 解决 两 个 
问题 。 


语义 元 是 怎么 么 来 的 
在 发 明 HTMLS 之 前 ， 其 发 明 者 花 了 很 长 时 间 研 究 已 有 的 网 页 。 他 们 不 是 光 浏 览 自己 喜欢 
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看 的 站 点 ， 还 研读 了 谷歌 对 十 亿 个 网 页 的 统计 信息 。( 如 果 你 对 这 个 出 色 的 研究 感 兴 趣 ， 可 以 
看 看 这 里 : http://code.google.com/webstats， 最 好 别 用 IE 看 ， 因 为 Internet Explorer 不 会 显示 那些 
漂亮 的 图 表 。) 

谷歌 公布 的 这 个 调查 分 析 并 列 出 了 Web 作 者 在 自己 网 页 中 使 用 的 类 名 。 谷歌 的 目的 是 想 告 
诉 大 家 , 你 们 使 用 的 类 名 可 能 与 匹配 的 元 素 的 用 途 相悖 , 从 而 为 大 家 构造 网 页 提供 有 价值 的 参 
考 。 比 如 ， 要 是 所 有 人 都 会 给 一 个 <div> 元 素 指定 名 为 header 的 类 名 ， 那 么 就 可 以 推断 出 大 家 
都 把 页 由 内 容 放 在 网 页 的 顶部 。 

谷歌 发 现 的 最 重要 的 一 个 现象 , 就 是 大 量 的 网 页 根本 不 使 用 类 名 ( 甚至 连 样式 表 都 没有 )。 
然后 ， 他 们 汇编 了 一 组 最 常用 的 类 名 ， 和 包括 footer、header、title、menu、nav， 分别 对 应 着 
HTMLS 中 的 <footer>、*《header>、<nav> 等 新 语义 元 素 。 另 外 一 些 由 其 他 人 建议 但 尚未 创造 出 
来 的 语义 元 素 有 search 和 copyright 等 。 

4&6] i&- JL, Web 页 面 拥有 某 种 共性 的 东西 ,比如 页 面 都 有 页 收 、 页 脚 、 侧 边栏 和 导航 菜单 。 
只 不 过 大 家 在 区 分 这 些 构造 时 采用 的 方式 多 多 少 少 有 点 不 一 致 。 基 于 这 个 认识 ,从 人 们 普遍 的 
做 法 中 提取 出 相应 的 语义 ， 据 以 为 HTML 语言 添加 一 些 新 元 素 ， 也 就 成 了 自然 而 然 的 事 了 。 这 
就 是 HTML5 中 语义 元 素 的 来 历 。 








HS. 知 要 克服 浏览 带 天 生 把 不 认识 的 元 系 当 成 内 联 Cinline ) 元 素 的 习惯 。 大 多 数 HTMEL5 
语义 元 素 (包括 本 章 已 经 介绍 的 这 些 , 但 除 <time> 之 外 ) 都 是 块 级 元 素 ， 也 就 是 需要 在 单独 一 行 
上 来 呈现 它们 ， 同 时 在 它们 与 前 后 元 素 之 间 各 添加 一 些 空间 。 























都 挤 到 一 起 。 为 解决 这 个 问题 ， 只 要 在 样式 表 中 添加 一 条 “超级 规则 ” 即 可 。 下 面 就 是 一 条 为 9 
个 HITMLS 元 素 应 用 块 级 显示 格式 的 规则 : 


article, aside, figure, figcaption, footer, header, hgroup, nav, section, 
summary 1 
display: block; 








这 条 规则 对 于 能 够 识别 HTML5S 元 系 的 浏览 融 没 有 作用 ， 因 为 它们 的 display 属 性 已 经 被 默认 
设 成 了 block。 而 且 这 条 规则 也 不 影响 我 们 已 经 为 这 些 元 素 应 用 的 样式 。 那 些 样式 照样 可 以 添加 
到 它们 号 上 。 

对 于 大 多 数 浏 览 器 而 言 ， 第 一 种 技术 可 以 解决 问题 。 但 这 里 的 “大 多 数 ” 并 不 包括 Internet 
Explorer 8 及 更 早 的 版 本 。 换 句 话 说， 对 于 较 早 版 本 的 下， 还 要 面临 一 个 挑战 : 它们 会 拒绝 给 无 
法 识别 的 元 素 应 用 样式 。 好 在 ， 有 一 个 变通 方案 : 通过 JavaScript 创 建新 元 素 ， 就 可 以 骗 过 IE, 让 
它 识别 外 来 元 素 。 比 如 ， 下 面 的 脚本 可 以 让 IE 识 别 并 为 cheader> 元 素 应 用 样式 : 


«script» 
document .createElement('header') 
«/script» 


实际 上 ， 你 不 用 目 己 杂 手写 这 些 代 码 ， 因 为 已 经 有 人 为 你 写 好 了 ， 只 要 拿 过 来 用 就 可 以 了 
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( Z Whttp://tinyurl.com/nlejxm )。 要 使 用 这 个 脚本 ， 只 要 在 页 面 的 <head> 区 块 中 引用 它 即 可 ， 就 
像 这 样 : 
<head> 
«title»...«/title» 
«script src-"http://html5shim.googlecode.com/svn/trunk/htmls5.js"»«/script» 

chead» 

这 行 代 码 会 从 html5shim.googlecode.com 这 个 Web 服 务 侣 上 取得 脚本 , ZA Je EU] VALE E. D. TT 
其 余部 分 之 前 运行 .这 个 脚本 很 短 而 且 十 分 有 效 一 一 它 就 是 使 用 前 面 描述 的 JavaScript 代 码 创建 了 
所 有 的 新 HTMLS 元 素 。 然 后 ， 你 就 可 以 使 用 样式 表 为 它们 应 用 样式 了 。 把 前 面 的 “超级 规则 ” 
放 到 样式 表 中 ， 新 元 素 就 能 正确 地 显示 为 块 元 素 了 。 现 在 ,， 剩 下 的 事 儿 就 是 使 用 这 些 元 素 ， 并 为 
它们 应 用 你 目 己 的 样式 。 

对 了 ， 刚 才 记 说 了 ， 前 面 的 html5.js 脚 本 应 该 是 有 条 件 执 行 的 一 一 只 在 你 使 用 旧版 本 Internet 
Explorer 的 情况 下 才 会 执行 。 为 了 避免 不 必要 地 加 载 JavaScript 文 件 ， 可 以 像 下 面 这 样 把 引用 脚本 
的 代码 放 在 IE 的 条 件 注释 中 : 

«1--[if lt IE 9]> 


«script src-"http://html5shim.googlecode.com/svn/trunk/html5.js"»«/script» 
«1[endif]--» 


XE, HEN iss (TEINE es Uds ) MSAKA, WRR DARE TS RAE BI JE 
时 间 。 

最 后 , 还 要 提醒 你 , 如 果 你 是 在 本 地 计算 机 上 测试 网 页 ，Internet Explorer 通 常会 锁定 该 文件 。 
意思 就 是 ， 你 会 在 页 面 顶部 看 到 只 名 昭著 的 下 安全 提示 条 ， 告诉 你 它 已 经 禁用 了 其 中 的 脚本 。 要 
想 正 常 测试 ， 必 须 单 击 该 安全 提示 条 ， 选 择 允 许 活 动 的 内 容 。 

如 有 果 你 把 页 面 上 传 到 网 站 中 ,就 没有 这 个 问题 了 ,不 过 这 无 疑 会 增加 测试 的 工作 量 。 解 决 方 
案 呢 ?就 是 在 页 面 开 涉 添 加 “Web 标 志 ”， 详 见 1.3.5 节 。 
































提示 要 解决 为 语义 元 素 应 用 样式 的 问题 ， 还 有 一 个 方案 : 使 用 Modernizr ( 参见 1.6.3 节 )。 
Modernizr 会 自动 替 你 解决 上 述 问题 ， 也 不 用 使 用 html5.js 或 者 样式 规则 。 因 此 ， 如 果 你 已 
经 在 用 Modernizr 检 测 功能 了 ， 那 么 要 考虑 的 就 只 有 怎么 使 用 语义 元 素 了 。 


2.4 ”使 用 语义 元 素 设 计 站 点 


在 一 个 击 单 、 类 似 文 档 的 页 面 中 应 用 请 义 元 素 相 对 容易 。 如 末 是 把 它们 应 用 到 整个 站 点 也 没 
有 任何 困难 ， 但 必须 面 对 一 系列 新 问题 。 因 为 HTML5 还 是 一 块 未 被 开垦 的 人 处女 地 ， 很 少 有 约定 
俗 成 的 惯例 (但 却 有 一 大 堆 合 情 合 理 的 争议 )。 这 样 说 吧 ， 假设 你 准备 从 两 种 标记 方 条 中 选择 一 
种 ，HITML5 标 准 会 说 它们 都 是 完全 可 以 接受 的 ， 至 于 哪个 方案 最 适合 你 的 内 容 ， 你 目 己 说 了 算 。 
图 2-6 展 示 了 我 们 接 下 来 将 要 设计 的 一 个 更 有 创造 性 的 作品 。 
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heks ë k26, 这 里 ， 之 前 仅 有 
| |_| Apocalypse Today E VER 
| | €) D | 口 file///C/HTMLS/Chapter 02/ApocalypseSite.html - - E Dl Hy ~ 时 Dl [Ei] ES 经 T 


成 了 一 个 完整 的 基于 内 
A i o (o WE RB DUE 
WWE I EADY AR. 横 跨 上 方 ， 内 容 位 居 其 
Apocalypse E GUN : 下 ， 而 左 侧 的 导航 条 提 
供 了 导航 控件 、ABOUT 
Articles US 和 一 张 图 片 广告 
How The World Conld End How the World Could End 


* Would Alicns Enslavc or Scenarios that spell thc end of life as wc know 
Eradicate Us? by Ray N. Carnation 
* Greal Fluuds vf the Past 


$ er E RIGHT NOW, you're probably feeling pretty good. After all, life in the developed 
qu , world is comfortable—probably more comfortable than it's been for the average 
e Why Everything You Know About > i 
Zombie Attacks Is Wrong human being throughout all of recorded history. 
* More.. 





But don't get too smug. There's still 
plenty of horrific ways it could all fall E 
apart. In this article, you'll learn ahant 


About Us 


Apocalypse Today is a world leader " ~ y a few of our favorites. 
in conspiracy theories, dour " din 
predictions, and panic-spreading. x Mayan Doomsday 


Our motto is "be prepared for every 


pm y Skeptics suggest that the Mayan 
possibility (except the good ones). 


calendar simply rolls to a new 
5,126-year era after 2012, and 
doesn't actually predict a life-ending 
apocalypse. But given that the 
long-dead Mayans were wrong about 





Will you bc thc last pcrson standing virtually everything else, why should 
if onc of thcsc apocalyptic sccnarios we trust them on this? 
plays out? 
Robot Takeover 
Not quite as frightening as a Vampire Takeover or Living-Dead Takeover, a robot 
rebellion is still a disquieting thought. We are already outnumbered by our 

"s pa Met technological gadgets, and even Bill Gates tears the day his Japanese robot slave 

"LUCKIES turns him over by the ankles and asks (in a suitably robotic voice) "Who's your 
'e less (m daddy now?" 


I ts toa sted Unexplained Singularity 


We don't know how the universe We don't know 














2.44.1 理解 <headery> 


对 于 <header> 元 素来 说 ， 有 两 种 使 用 方式 ， 但 差别 并 不 大 。 一 种 是 用 它 标 注 内 容 的 标题 ， 另 
一 种 是 用 它 标 注 网 页 的 页 眉 。 有 时 候 , 这 两 种 用 途 是 重 登 的 ( 比如 图 2-1 中 那个 单 页 文 草 的 例子 )。 
但 有 时 候 , 你 的 网 页 里 不 仅 要 用 <header> 标 注 页 眉 , 还 要 用 它 去 标注 很 多 内 容 的 标题 。 图 2-6 所 示 
的 例子 就 是 这 种 情况 。 

但 有 时 候 到 底 该 不 该 用 cheader> 并 不 十 分 明确 ， 因 为 要 标注 的 内 容 区 块 的 角色 变化 会 影响 最 
Edge 如 果 你 处 理 的 是 内 容 ， 那 除非 必要 ， 一 般 不 必 使 用 cheader>。 只 有 在 内 容 标 题 还 附带 

其 他 信息 的 情况 下 ， 才 有 必要 考虑 cheader>。 如 果 你 的 内 容 就 只 有 一 个 标题 ， 那 就 用 一 个 <h1> 
eil 类 似 地 ， 如 果 除 了 主 标题 ， 还 有 一 个 或 几 个 副标题 ， ue M Up e 假 
如 除 此 之 外 还 有 其 他 信息 ， 那 才 有 必要 用 cheader> 把 主 副标题 以 及 其 他 信息 包装 起 来 (参见 2.2.2 
节 )。 不 过 ， 在 为 网 站 创建 页 眉 的 时 候 ， 人 们 多 数 会 直接 考虑 <header> 元 系 ， 即 便 这 个 页 丑 就 是 
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—^rCsSPigByIE e. ERRA o 35 gUBIERDuSBy—T EGDIHTE, WERE RARE E 
面 塞 点 什么 东西 呢 ! 
结论 如 下 : 网 页 中 可 以 包含 多 个 cheader> 元 素 ( 通 第 也 应 该 如 此 )， 即 使 相应 的 区 块 在 页 面 


中 的 角色 不 一 样 。 [rem 


把 网 页 变 成 网 站 
图 2-6 展 示 了 一 个 虚构 的 网 站 中 的 一 个 页 面 。 
在 真实 的 网 站 中 ， 可 能 几 十 个 甚至 更 多 个 页 面 都 会 有 相同 的 布局 ( 以 及 相同 的 侧 边 栏 )。 
访客 点 击 页 面 的 链接 后 ， 唯 一 变化 的 地 方 就 是 主页 面 中 的 内 容 一 一 也 就 是 这 里 的 文章 。 
HTML5 并 没有 什么 魔法 ， 它 不 会 让 你 的 网 页 自动 变 成 网 站 。 换 句 话说， 你 还 要 靠 如 下 所 
示 的 以 前 开发 网 站 的 技术 和 技巧 。 
O 服务 器 端 框 架 。 其 实 背 后 的 思想 都 很 简单 : 在 浏览 器 请 求 某 个 页 面 时 ，Web 服 务 器 临时 
将 页 面 的 各 个 部 分 组 装 起 来 ， 包 括 公 共 的 元 素 ( 如 导航 条 ) 和 内 容 。 这 是 目前 最 常用 的 
一 种 技术 ,也 是 构建 大 型 、 专 业 网 站 的 必由之路 。 以 不 同方 式 实现 这 种 手段 的 技术 不 计 
其 数 , 包括 很 早 就 出 现 的 服务 器 端 包含 功能 , 一些 富 Web 应 用 平台 (如 ASPNET 和 PHP ), 
还 有 内 容 管理 系统 (如 Drupal 和 WordPress ). 
口 页 面 模板 。Dreamweaver、Expression Web 等 功能 强大 的 网 页 编辑 器 中 就 有 页 面 模板 功 
能 ,模板 就 是 一 个 定义 了 页 面 结构 并 且 和 包含 页 面 中 会 重复 出 现 的 内 容 ( 像 页 届 和 侧 边栏 ) 
的 页 面 。 有 了 模板 , 就 可 以 利用 它 来 创建 网 站 的 所 有 页 面 。 最 关键 的 是 , 更 新 模板 之 后 ， 
网 站 编辑 器 会 自动 更 新 使 用 该 模板 的 所 有 页 面 。 











当然 ,使 用 什么 技术 都 可 以 ， 而 本 书 只 关注 最 终结 果 : 组 合 到 一 块 构成 页 面 的 标记 ， 以 及 浏 
览 融 中 的 外 观 。 

图 2-6 所 示 的 启示 录 网 站 新 增 了 一 个 站 点 的 页 眉 。 这 个 页 眉 的 内 容 是 一 张 模 幅 图 瞩 ， 图 厂 中 
的 文本 也 是 由 图 片 编辑 益生 成 的 。 以 下 就 是 这 个 站 点 使 用 的 cheader> 元 么 : 


«header class-"SiteHeader"» 
«img src-"site logo.png" alt-"Apocalypse Today > 
<h1 style-"display:none"»Apocalypse Today</h1> 
«/header» 


在 此 , 我 们 注意 到 页 眉 中 还 包含 一 个 我 们 在 页 面 中 看 不 到 的 <h1> 元 素 ， 其 中 的 内 容 与 图 片 中 
的 文本 内 容 相 同 。 而 一 条 内 联 样式 隐藏 了 这 个 标题 。 

这 个 例子 提出 了 一 个 明显 的 问题 一 一 为 什么 要 添加 一 个 你 看 不 见 的 标题 ? 原因 其 实 不 止 一 
个 。 首 完 ，<header> 元 系 中 都 应 该 包含 某 个 级 别 的 标题 ， 这 样 做 仅仅 是 为 了 扣 守 HTML5 的 规定 。 
其 次 , 这 样 设计 可 以 让 使 用 屏幕 阅读 需 的 人 能 够 无 障碍 地 阅读 ,因为 他 们 经 向 会 从 一 个 标题 跳 到 
另 一 个 标题 ， 而 不 会 关注 标题 之 间 的 内 容 。 最 后 ， 这 样 就 为 页 面 建立 了 标题 结构 ， 而 页 面 其 他 部 
分 的 标题 都 要 依 序 选 用 。 如 有 果 我 们 说 ,在 站 点 的 页 眉 中 使 用 了 <h1> 元 系 后 ， 你 就 应 该 给 页 面 中 其 
他 的 区 块 (如 “Articles” 和 “About Us" ) 选用 <h2> 元 率 作 标题 ， 你 可 能 党 得 有 点 怪 。 要 了 解 为 
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什么 这 样 设 计 ， 请 参考 下 面 的 附注 栏 “ 站 点 的 标题 结构 ”。 


注意 当然 3 fal 年 单 地 给 页 pi J 中 添加 一 行文 学 比较 省 事 。 ( 而 如 果 你 喜欢 一 些 新 奇 的 字体 , 还 可 以 
考虑 CSS3 新 的 详 入 字体 功能 ， 详 见 8.2 节 。) 但 对 于 诸多 把 标题 放 在 图 片 中 的 网 页 而 言 ， 
隐藏 标题 同样 也 是 个 不 错 的 办 法 。 


站 点 的 标题 结构 

一 个 页 面 中 可 以 有 多 个 一 级 标题 吗 ? 这样 做 到 底 好 不 好 ? 

根据 HTML 的 官方 说 法 ,一 个 页 面 中 可 以 有 任意 多 个 一 级 标题 。 但是, 很 多 网 站 开发 人 员 
更 倾向 于 每 个 页 面 只 使 用 一 个 一 级 标题 ， 因 为 这 样 能 保证 网 页 的 无 障碍 性 ( 因为 使 用 屏幕 阅 
读 器 的 人 在 从 一 个 二 级 标题 跳 到 另 一 个 二 级 标题 的 时 候 ， 有 可 能 错过 中 间 的 一 级 标题 。) 也 有 
不 少 网 络 维护 人 员 认 为 , 每 个 页 面 就 应 该 只 A 这 个 一 级 标题 在 整个 网 站 中 是 独 
一 无 二 的 ， 可 以 明确 地 告诉 搜索 引擎 网 站 中 有 什么 

图 2-6 中 的 例子 采用 的 就 是 这 种 风格 。 站 点 顶部 id ui "Apocalypse Today” 是 页 面 中 唯一 
的 <h1> 元 素 。 页 面 中 其 他 的 部 分 ， 如 侧 边 栏 中 的 Articles 和 AboutUs, 使 用 的 都 是 二 级 标题 。 文 
章 的 标题 使 用 的 也 是 二 级 标题 。( 额外 做 一 点 规划 可 以 让 一 级 标题 中 也 包含 当前 文章 的 信 





毕竟 , 这 个 标题 是 不 可 见 的 , 如 此 一 来 可 以 让 通过 谷歌 等 搜索 引擎 搜索 特定 关键 词 的 人 
能 看 到 这 个 页 面 。) 
不 过 ， 除 此 之 外 还 有 一 种 风格 ,也 同样 是 允许 的 。 换 名 话说 ， 可 以 在 页 面 中 每 个 主要 部 分 


本 比如 侧 边 栏 、 文 章 等 。 

或 者 ， 也 可 以 给 网 站 一 个 一 级 标题 ， 而 把 侧 边栏 的 内 容 用 二 级 标题 标注 (就 跟 眼 下 这 个 人 铭 
Secus JE mre m 这 样 没 有 问题 ， 因 为 它 的 纲要 系统 
允许 这 样 。 稍 后 在 2.5.3 节 将 会 介绍 ， 有 些 元 素 ( 包括 carticle> )， 是 被 当 作 一 个 独立 的 区 块 来 
处 理 的 ， 独 立 的 区 块 可 以 有 自己 不 同 的 纲要 。 这样 ,诸如 此 类 的 独立 区 块 完全 可 以 重新 建立 标 
题 级 别 ， 再 从 <h1> 开 始 。( 不 过 ，HTML5 也 说 从 任何 标题 级 别 开 始 都 担 好 的 。) 

简 言 之 ， 如 何 设计 站 点 的 标题 结构 是 一 个 没有 唯一 答案 的 命题 。 不 过 ， 随 着 HTML5 获 得 
胜利 并 统治 Web， 好 像 多 个 <h1> 的 设计 会 越 来 越 时 肾 。 不 过 现在 ,很 多 开发 人 员 为 了 让 屏幕 阅 
Tn 


2.4.2 ”用 <nav> 标 注 导 航 链接 


个 启示 录 网 站 中 最 有 意思 的 新 功能 就 是 左 侧 的 侧 边 栏 , 其 中 包含 网 站 的 导航 、 其 他 信息 不 
pte 广告 。( 一 般 来 说 ， 广 告 位 都 是 放 一 段 JavaScript 脚 本 ， 从 类 似 Google i 
机 地 提取 广告 但 我 们 这 文 个 例子 就 硬 编码 了 一 张 图 片 ， 就 算是 一 种 蔡 代 吧 。) 
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在 传统 的 HTML 网 站 中 ， 你 可 能 会 把 整个 侧 边 栏 都 放 到 一 个 cdiv> 中 。 而 在 HTML5 时 代 ， 则 
应 该 主要 使 用 两 个 针对 性 更 强 的 元 素 : <aside> 和 <nav>。 

要 说 <aside> 元 素 ， 倒 是 跟 <header> 元 系 有 点 像 ， 哪 里 像 呢 ? <aside> 的 含义 也 有 一 点 细微 的 
发 散 。 可 以 用 它 来 标注 一 段 与 正文 无 关 的 内 容 (2.2.5 节 正 是 这 么 做 的 )， 也 可 以 用 它 表 示 页 面 中 
一 个 完全 独立 的 区 块 一 一 作为 页 面 主要 内 容 的 陪衬 。 

而 <nav> 元 系 则 用 于 包 污 一 组 链接 。 这 些 链接 可 以 指 癌 当前 页 面 中 的 主题 ， 也 可 以 指 问 网 站 
中 的 其 他 页 面 。 多 数 页 面 中 都 会 包含 多 个 cnav> 区 块 。 但 并 不 是 所 有 链接 都 需要 cnav> 区 块 一 一 相 
反 , nav> 通 稼 只 用 于 页 面 中 最 大 最 主要 的 导航 区 。 例如, 对 于 一 组 文章 的 链接 ( 像 图 2-6 那 样 的 ), 
绝对 需要 一 个 cnav> 区 块 。 可 是 ， 如 果 只 是 放 在 页面 底部 几 个 许可 或 联系 信息 的 链接 ， 那 大 可 不 
V Hi«nav» o 

明白 了 这 两 个 元 泰 的 用 途 ， 接 下 来 该 付 诸 实 践 了 。 首 先 ， 再 看 一 看 图 2-6 中 的 侧 边 栏 。 然 后 ， 
在 一 张 纸 上 男 一 画 ， 看 你 打算 怎么 用 标记 体现 其 中 内 容 的 结构 。 最 后 ， 再 接 痢 往 下 看 ， 一 块 来 找 
= dg HET e 

事实 上 ， 如 图 2-7 所 示 ， 至 少 有 两 个 比较 合理 的 方式 来 构造 侧 边栏 。 









































图 2-7: 左 : 可 以 把 整个 侧 边栏 想象 成 一 个 导航 区 ， 在 
其 中 填 入 一 些 内 容 。 这 样 ， 整 个 侧 边 栏 可 以 放 在 一 个 


cnavy 中 ， 其 他 内 容 可 以 使 用 casidey ( 因为 其 中 的 内 容 
由 与 侧 边栏 的 主要 内 容 一 一 链接 无 关 ) 。 右 : 或 者 , 可 以 


把 整个 侧 边栏 想象 成 一 个 独立 的 多 用 途 的 网 页 区 块 。 这 
样 ， 侧 边栏 就 是 一 个 <aside>， 而 其 中 有 关 导 航 的 内 容 


di x 
放 在 cnavy 里 面 








这 个 启示 录 站 点 使 用 的 是 第 二 种 方案 ( 即 图 2-7 中 右 侧 的 结构 )。 选 择 该 方案 主要 是 因为 这 里 
的 侧 边栏 有 多 种 用 途 ， 而 没有 哪 一 种 用 途 是 主要 用 途 。 不 过 ， 要 是 这 里 的 导航 又 长 又 复杂 ( 比如 
都 用 上 了 可 折 著 的 亲 单 形式 )， 只 是 后 面 跟着 一 小 段 内 容 ， 那 第 一 种 方案 就 更 合适 一 些 。 
以 下 就 是 构成 侧 边栏 的 标记 ， 包 含 三 个 区 块 : 
«aside class-"NavSidebar"» 
«nav? 
«h2»Articles«/h2» 
«ul» 


<li><a href-2"..."»How The World Could End«/a»«/li» 
<li><a href-"..."»Would Aliens Enslave or Eradicate Us?«/a»«/li» 














</ul> 
</nav> 


<section> 
<h2>About Us</h2> 
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«p»Apocalypse Today is a world leader in conspiracy theories ..." 
</p> 
«section» 


«div? 
«img src-"ad.jpg" alt-"Luckies cigarette ad: it's toasted > 

</div> 

</aside> 


看 完 这 些 代 码 ， 应 该 注意 到 如 下 关键 点 。 

O 标题 〈Articles 和 About Us) 使 用 的 是 二 级 标题 。 这 样 ， 它 们 就 自然 位 于 网 站 的 一 级 标题 
之 下 ， 从 而 方便 屏幕 阅读 需 无 障碍 地 阅读 标题 。 

O 链接 以 <ul> 和 《<1i> 元 素 组 成 的 无 序列 表 来 标记 。 网 站 设计 师 普 过 认为 , 处 理 一 组 链接 的 最 
佳 方式 ， 也 是 最 无 障碍 的 方式 ， 就 是 使 用 列表 。 不 过 ， 你 可 能 得 通过 样式 表 删 除 列 表 项 
默认 的 缩 进 〈 这 个 例子 已 经 这 样 做 了 ) RULES CASTRI B NE )。 

O “About Us” 包 含 在 一 个 <section> 元 素 中 。 这 是 因为 没有 合适 的 语义 元 素 。<section> 
当然 要 比 <div> 更 具体 一 点 ， 它 适合 任何 以 标题 开头 的 内 容 区 块 。 假 如 有 一 个 更 具体 的 元 
z& (人 例如， 假设 有 一 个 <about> 元 素 )， 那 么 这 里 就 不 会 用 <section>， 可 惜 没有 。 

a 图 片 广告 放 在 一 个 <div> 里 。 如 前 所 述 ，<section> 元 素 只 适合 带 标题 的 内 容 ， 而 这 里 的 图 
片区 块 没有 标题 。( 而 如 果真 有 的 话 ， 比 如 “A Word from Our Sponsors”, SEIZH 
<section> 元 条 了 。) 从 技术 角度 看 ,根本 没有 必要 把 图 片 还 放 在 其 他 元 又 中 ,但 有 了 <div>， 
区 块 之 间 的 关系 就 更 明确 了 ， 这 样 更 容易 分 别 为 不 同 的 区 块 应 用 样式 ， 或 者 在 必要 时 通 
过 JavaScript 分 别 操作 它们 。 

实际 上 ， 还 有 一 些 细节 ， 这 个 侧 边栏 里 没有 , 但 可 能 其 他 侧 边 栏 里 会 有 。 比 如 ， 复杂 的 侧 边 



































栏 可 能 会 以 <header> 和 《footer> 作 为 开头 和 结尾 , 也 有 可 能 包含 多 个 nav> 区 块 一 一 存档 文章 链接 
一 个 、 新 闻 报 道 链接 一 个 、 友 情 链 接 或 相关 站 点 链接 一 个 ， 等 等 。 有 兴趣 的 话 ， 读 者 可 以 目 己 找 
找 一 些 有 代表 性 的 博客 ， 其 中 的 侧 边 栏 往往 包含 很 多 区 块 ， 其 中 不 少 都 是 导航 用 的 。 


则 一 





这 里 为 aside> 标 注 的 侧 边 栏 应 用 样式 的 规则 ， 与 为 传统 的 <div> 标 注 的 侧 边栏 应 用 样式 的 规 
样 。 它 们 都 会 把 侧 边 栏 摆 放 到 正确 的 位 置 上 , 使 用 绝对 定位 ,设置 菜 些 格式 上 的 细 市 ， 如 内 








XB. 背景 ， 等 等 : 
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aside.NavSidebar 

1 
position: absolute; 
top: 179px; 
left: 0px; 
padding: 5px 15px Opx 15px; 
width: 203px; 
min-height: 1500px; 
background-color: #eee; 
font-size: small; 
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这 条 规则 后 面 是 一 些 上 下 文 样式 表 规 则 , 分 别 为 侧 边 栏 中 的 <ch2>、<ul>、<1i> 以 及 <img> 元 素 
应 用 样式 。( 跟 以 前 一 样 ， 可 以 从 www.prosetech.com/html5 下 和 载 示例 代码 ， 人 然后 仔细 人 研究 一 下 其 
中 的 所 有 样式 规则 。) 





注意 ”我们 已 经 介绍 了 ,， xnav) 通常 会 单独 出 现 ， 有 时 候 也 会 出 现在 caside> 中 。 其 实 , 还 有 一 个 
地 方 也 经 常 可 以 看 到 它 的 身影 : 网 页 顶部 的 <header> 元 素 中 。 





理解 了 这 个 侧 边栏 是 如 何 构造 的 ， 也 就 容易 理解 它 与 整个 页 面 布 局 的 天 系 了 了 ， 如 图 2-8 
所 不 。 


图 2-8. 这 里 展示 了 启示 录 网 页 ( 图 2-6 ) 中 用 到 的 
Web Page 所 有 语义 元 素 


<header> 


«aside» 


«article» 


header 


«section» 


«footer» 





使 用 <details> 和 <summary> 的 折叠 杠 
你 肯定 在 有 的 网 页 上 见 过 可 以 折 营 的 区 块 : 通过 单 击 区 块 标题 能 够 显示 或 隐藏 其 中 的 内 
容 。 折 党 框 是 用 JavaScript 能 够 轻 芍 实现 的 众多 界面 元 素 之 一 。 只 要 在 单 击 标题 的 时 候 ， 适 当 
改变 样式 设置 ， 隐 藏 内 容 : 


var box = document.getElementById("myBox"); 
box.style.display - "none"; 


或 者 再 把 内 容 显 示 出 来 即 可 : 


var box = document.getElementById("myBox"); 
box.style.display = "block"; 


有 意思 的 是 ，HTML5 还 新 添 了 两 个 语义 元 素 ， 用 于 辅助 将 这 种 行为 自动 化 。 具 体 做 法 是 
把 可 以 折 营 的 区 块 放 在 一 个 <details> 元 素 中 ， 而 把 标题 放 在 一 个 <summary> 元 素 中 。 最 终结 果 
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类 似 如 下 这 样 : 
«details? 
«summary»Section #1</summary> 
«p»If you can see this content, the section is expanded«/p» 


«/details» 

支持 这 两 个 元 素 的 浏览 器 (目前 只 有 Chrome 支 持 ) 只 会 显示 标题 一 一 可 能 还 会 带 有 视觉 
上 的 提示 ( 比如 在 标题 这 边 放 在 一 个 小 三 角形 图 标 )。 然 后 ， 用 户 单 击 标题 ， 再 把 完整 的 内 容 
显示 出 来 。 不 支持 <details> 和 <Ssummary> 的 浏览 器 则 上 来 就 会 显示 所 有 内 容 ， 用 户 也 不 能 把 内 
容 折 党 起 来 。 

目前 ， 业 内 对 <details> 和 <summary> 元 素 还 有 争议。 很 多 Web 开 发 人 员 认 为 它们 并 不 是 真 
正 的 语义 元 训 ， 因 为 它们 更 倾向 于 视觉 表现 ， 而 非 逻 辑 结构 。 

我 们 的 建议 是 最 好 不 要 使 用 cdetails> 和 <summary> 元 素 ， 因 为 支持 它们 的 浏览 器 太 少 了 。 
虽然 可 以 用 JavaScript 写 一 段 脚 本 在 不 支持 它们 的 浏览 器 中 使 用 ， 但 编写 这 种 脚本 不 如 你 自己 
实现 一 个 在 任何 浏览 器 中 都 可 以 折 党 的 方案 ， 毕 竞 那 样 只 要 几 行 代码 而 已 。 


24.3 ”理解 <footer> 


HTML5 与 内 容 丰 富 的 “ 胖 ”<header> 可 请 天 生 一 对 。 在 <header> 中 不 仪 可 以 放 副 标题 和 作 
者 署名 ， 还 可 以 添加 图 片 、 导 航 区 块 (使 用 cnav> 元 素 )， 以 及 任何 有 必要 放 在 页 面 顶 部 的 内 容 。 
奇怪 的 是 ，HTML5 对 <footer> 元 系 可 就 不 那么 有 人 情 味 了 。HTML5 规 定 ， 只 能 在 <footer> 
元 素 中 放 一 些 网 站 版 权 信息 、 作 品 来 源 、 法 律 限 制 及 链接 之 类 的 信息 。 不 能 在 <footer> 里 面 放 太 
多 链接 、 重 要 的 内 容 或 无 关 的 内 容 ， 如 广告 、 社 交 媒 体 按钮 以 及 网 站 部 件 等 。 
这 驶 提出 了 一 个 问题 : 如 条 你 的 网 站 需要 一 个 “ 胖 ”<“footer> 怎 么 办 ? 毕竟 ,“ 胖 ”页 脚 目 
本 非常 流行 ( 见 图 2-9 中 的 例子 ) 这 些 “ 胖 ”页 脚 经 浓 会 用 到 如 下 所 示 的 一 些 花 哨 的 技术 。 
口 固定 定位 ， 这 样 就 可 以 让 页 脚 始终 固定 在 浏览 融 窗 口 底 部 ， 无 论 访 客 如 何 滚动 都 无 所 请 
(如 图 2-9 中 的 例子 所 示 )。 
OQ 关闭 按钮 ， 这 样 用 户 在 看 完 页 脚 内 容 后 ， 单 击 它 们 就 可 以 腾 出 页 面 空间 ( 如 图 2-9 中 的 例 
子 所 示 )。 为 实现 这 个 功能 ， 要 使 用 一 点 JavaScript 代 码 ( 与 前 一 节 附 注 栏 中 使 用 的 代码 相 
似 )， 以 便 隐 藏 包含 页 脚 的 元 又 。 
O 部 分 透明 的 背景 ， 这 样 就 可 以 透 过 页 脚 看 到 内 容 。 如 果 页 脚 正 在 宣布 即时 新 闻 或 重要 的 
页 声明 ， 部 分 透明 的 痛 景 很 合适 ,通常 与 关闭 按钮 联 用 。 
口 动画 ,在 视图 中 弹出 ， 或 者 请 入 视图 (例如 ， 可 以 看 看 在 http:/www.nytimes.com 上 阅读 到 
一 篇 文 草 最 后 时 弹出 的 相关 文 草 提示 框 )。 
如 采 你 的 站 点 中 包含 这 种 页 脚 ， 束 要 作出 选择 。 比 较 徐 单 的 办 法 是 无 视 规 定 。 这 个 办 法 并 没 
有 了 听 起 来 那么 可 怕 ， 因 为 其 他 网 站 的 开发 人 员 也 在 犯 同样 的 错误 。 而 随 着 时 间 推 移 ， 官方 的 规定 
也 可 能 会 放 开 ， 人 允许 用 <footer> 包 含 奇特 的 页 脚 。 可 是 ,假如 你 现在 不 想 违 反 标 准 的 规定 ， 那 就 
得 调整 一 下 标记 。 好 在 调整 标记 不 难 。 
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" 


| Diese ot d 图 2-9. 这 | ^" 38 BY "RES 
A | 页 脚 中 包含 不 少 多 余 的 
| 内 容 ， 比 如 一 个 奖项 图 
片 和 一 些 社 交 媒 体 按 
钮 。 它 使 用 了 固定 定位 
使 自己 一 直 显 示 在 浏览 
器 窗口 底部 ， 就 像 一 个 


Articles i 工具 条 。 好 在 这 个 页 -人 脚 
e How The World Could End How the World Could End 有 一 个 地 方 of IM DR 补 T 
* Would Alicna Enslavc or Scenarios that spell thc end of life as we know 


* —— à the Past A 的 缺点 ZN 3p 就 是 AE 右 E f8 


* Conschenemenany vause RIGHT NOW, you're probably feeling pretty good. After all, life in the developed world e 单 ZEE 

á €— —— is comfortable—probably more comfortable than it's been for the average human 的 HJ 按 t f d 1% HR 
Why Everything You Know About " : ` ` 

: being throughout all of recorded history. tH m 能 i 这 小 Du 脚 $ A 视 


Zombie Attacks Is Wrong 
è More... 
But don't get too smug. There's still NÉ 
plenty of horrific ways it could all fall Ef 中 / B 人 











调整 标记 的 关键 在 于 从 多 余 的 内 容 中 提取 出 标准 的 页 脚 来 。 EN F, 这些 内 容 看 起 来 还 
一 个 页 脚 ， 但 在 标记 中 ， 其 他 内 容 都 不 包含 在 <footer> 元 素 中 。 例 如 ， 以 下 就 是 图 2-9 中 “ 胖 ” 
页 脚 的 实际 结构 


<div id="FatFooter"> 
<1--“ 腾 ”页 脚 的 内 容 --> 
«img onclick="CloseBox()" src="close icon.png" class="CloseButton"> 


<footer> 
<!-- 标准 页 脚 的 内 容 --> 
<p>The views expressed on this site do not ... </p> 
«/ footer» 
«/div» 


最 外 围 的 <div> 没 有 特殊 含义 , 它 只 是 负责 把 多 余 的 内 容 和 标准 的 页 脚 内 容 包 装 起 来 。 同 样 ， 
可 以 给 它 应 用 一 些 样式 表 规 则 ， 以 便 将 其 锁定 在 合适 的 位 置 上 : 


SFatFooter { 
position: fixed; 
bottom: Opx; 
height: 145px; 
width: 1005; 
background: #ECD672; 
border-top: thin solid black; 
font-size: small; 
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注意 ”在 这 个 例子 中 ， 样 式 表 规则 是 通过 ID 应 用 样式 的 (使 用 #FatFooter 选 择 符 )， 并 没有 使 用 
类 名 〈 如 .FatFooter 选 择 符 )。 这 是 因为 “ 胖 ” 页 脚本 身 已 经 有 了 唯一 的 ID， 目 的 是 为 了 
方便 JavaScript 代 码 在 用 户 单 击 关 闭 按钮 时 可 以 找到 并 隐藏 它 。 这 种 情况 下 ， 在 样式 表 中 
使 用 唯一 的 ID 要 比 另外 添加 一 个 类 名 更 可 取 。 


当然 ， 也 可 以 把 页 脚 中 的 其 余 内 容 放 在 一 个 <aside> 元 素 中 ， 从 而 清楚 地 表明 其 中 的 内 容 属 
于 一 个 独立 的 区 块 ， 与 页 面 中 的 其 他 内 容 无 天 。 相 应 的 标记 结构 类 似 如 下 所 示 : 
«div id-"FatFooter"» 
«aside» 
<!--“ 胖 ”页 脚 的 内 容 --> 
«img onclick-"CloseBox()" src-"close icon.png" class-"CloseButton"» 





«/aside» 
«footer» 
<!-- 标准 页 脚 的 内 容 --> 
<p>The views expressed on this site do not ... </p> 
«footer» 
«/div» 


这 里 最 重要 的 一 点 是 没有 把 <footer> 放 到 <aside> 元 素 中 。 因 为 footer> 并 不 属于 <asidey> ， 
而 是 整个 网 站 的 一 部 分 。 类似 地 , 如 果 有 一 个 <footer> 属 于 某 些 内 容 , 那么 就 应 该 将 这 个 <footer> 
放 在 包含 相应 内 容 的 元 条 中 。 








注意 ”正确 使 用 HTMLS 语 义 元 素 的 规则 和 指导 方针 还 在 变化 。 在 HTML 社 区 中 ， 有 关 如 何在 大 
型 、 复 杂 站 点 中 正确 使 用 标记 的 话题 ， 常 常会 引起 激烈 的 争论 。 在 此 ， 我 给 大 家 一 个 建 
议 : 如 果菜 个 元 素 看 起 来 不 适合 标注 你 的 内 容 ， 那 就 不 要 用 。 当 然 ， 你 也 可 以 上 网 去 讨 
论 ， 很 多 超 聪 明 的 HIML 大 师 会 为 你 现身说法 。( 最 好 的 一 个 去 处 就 是 
http:WhtmlSdoctorcom， 在 该 网 站 大 多 数 文章 的 评论 中 ， 都 可 以 看 到 正在 争论 中 的 话题 。) 


2.4.4 理解 区 块 


如 前 所 述 ， 区 块 元 素 <section> 是 应 该 最 后 考虑 的 场 义 元 素 。 如 果 有 一 个 寓 标 题 的 内 容 块 ， 
而 其 他 语义 元 素 都 不 合适 ， 那 么 选择 <section> 通 稍 比 选择 cdiv> 更 好 一 些 。 

那么 通 稼 应 该 在 <section> 元 素 中 放 什 么 呢 ? 这 跟 你 的 看 法 有 关 ， 它 可 能 是 一 个 能 够 适合 
种 需求 的 灵活 的 工具 ， 也 可 能 是 一 个 松 松 震 垮 没有 明确 身份 的 怪物 。 之 所 以 会 有 这 人 么 大 的 区 
别 ， 主 要 是 因为 section> 在 网 页 中 可 以 扮演 很 多 不 同 的 角色 。 可 以 放 在 <section> 中 的 内 容 有 
以 下 几 种 。 

口 与 页 面 主体 内 容 并 列 显示 的 小 内 容 块 ， 例 如 我 们 启示 录 网 站 中 的 About Us 段落 。 

口 独立 性 内 容 ， 但 却 不 能 用 文 草 («article» ) 来 描述 ， 比 如 客户 的 购物 记录 或 产品 清单 。 




















54 | 第 2 章 构造 网 页 的 新 方式 


a 分 组 内 容 一 一 例如 ， 新 闻 站 点 中 的 一 组 文章 。 
a 比较 长 的 文档 中 的 一 部 分 。 比 如 ， 在 局 示 录 网 站 的 文章 中 ， 可 以 用 它 把 每 种 世界 末日 的 
情形 标注 为 一 个 独立 的 区 块 。 有 时候 ， 这 样 使 用 区 块 是 为 了 保证 文档 能 有 一 个 正确 的 纲 
要 ， 而 这 正 是 下 一 节 我 们 要 介绍 的 内 容 。 
前 面 列 出 的 最 后 两 项 可 能 会 令 你 觉得 很 不 可 思议 。 很 多 Web 开 发 人 员 会 觉得 用 一 个 元 素 既 可 
以 标注 一 篇 文章 中 的 一 个 片段 ， 又 可 以 标注 整个 一 组 文章 ， 这 伸缩 性 似乎 有 点 大 了 。 有 人 认为 
HTML5 至 少 应 该 用 两 个 不 同 的 元 素来 对 应 这 两 种 情况 。 但 HTML5 的 创造 者 希望 一 方面 保持 简单 
C 限制 新 元 素 的 数量 )， 另 一 方面 也 让 新 元 素 尽 可 能 灵活 且 实 用 。 
最 后 ， 还 有 一 件 事 儿 要 考虑 。<section> 元 素 也 会 影响 网 页 的 纲要 ， 也 就 是 我 们 接 下 来 要 讨 
论 的 主题 。 












































2.5 HTML5Z2Wz 


HTMLS 定 义 了 一 组 规则 ， 用 于 说 明 如 何 为 网 页 创建 文档 纲要 (document outline )。 网 页 的 纲 
要 能 够 提供 很 多 便利 。 例 如 , 浏览 器 可 以 让 你 从 纲要 中 的 一 处 跳 到 男 一 处 。 设计 工 具 可 以 让 你 通 
过 在 纲要 视图 中 拖 放 来 重 排 区 块 。 搜 索引 擎 可 以 使 用 纲要 构建 更 好 的 页 面 预览 ， 而 屏幕 阅读 需 获 
得 的 便利 最 大 ， 通 过 使 用 纲要 可 以 引导 视力 有 障碍 的 用 户 在 深度 般 套 的 区 块 和 子 区 块 中 导航 。 

不 过 ， 这 些 情形 还 没有 一 项 成 为 现实 ， 因 为 今天 几乎 还 没有 谁 在 使 用 HTML5 纲 要 一 一 除了 
下 一 节 将 要 介绍 的 几 个 开发 人 员工 具 。 




















注意 一 个 不 影响 页 面 在 浏览 器 中 的 表现 ， 也 没有 其 他 工具 使 用 的 功能 很 难 让 人 兴奋 。 但 是 ， 
通过 评审 网 页 ( 至 少 是 网 站 中 典型 网 页 ) 的 纲要 来 确保 其 结构 合理 ， 而 且 你 也 没有 破坏 
HTMLS 的 规则 ， 这 个 想法 还 是 很 不 错 的 。 


2.5.1 如 何 碍 看 纲要 


要 真正 理解 纲要 ， 必 须 看 一 看 你 的 网 页 生成 的 纲要 是 什么 样子 的 。 目 前 ， 还 没有 浏览 融 实 现 
HTML5S 纲 要 《或 者 给 你 提供 一 种 查看 方式 S 不过， 倒是 有 几 个 工具 填补 了 这 个 空 

O 在 线 HTML 纲 要 生成 器 。 访 问 http:/gsnedders.html$.oreg/outliner ， 告 诉 纲要 生成 名 你 想 为 
哪个 网 页 生成 纲要 。 如 同 我 们 在 1.4.2 节 使 用 的 HTML5S 验 证 器 一 样 ， 可 以 通过 三 种 方式 提 
区 网 页 : 从 本 地 电脑 中 上 传 、 提 供 URL 或 百 接 在 文本 框 粘贴 标记 。 

O Chrome 扩展 。 可 以 在 Chrome 浏 览 硕 中 使 用 ho 插件 分 析 并 生成 纲要 。 访 问 
http://code.google.com/p/h50o 安 装 该 插件 ， 人 然后 在 网 上 找 开 一 个 HTML5 页 面 看 一 看 (可惜 
的 是 ， 在 写作 本 书 时 ，h5o 不 能 分 析 本 地 计算 机 中 的 文件 )。 然后 浏览 顶 地 址 栏 中 会 出 现 
一 个 纲要 图 标 , 单 击 该 图 标 就 会 显示 页 面 的 结构 ( 如 图 2-10 所 示 )。hso 的 页 面 中 也 提供 了 
一 个 书签 工具 (bookmarklet ) 一 一 可 以 添加 到 浏览 硕 书 签 列 表 中 的 一 小 段 JavaScript 代 三， 
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通过 它 可 以 在 Firefox 和 Internet Explorer 中 显示 页 面 的 纲要 ， 但 也 时 候 也 会 出 点 小 状况 。 
Q Opera } R- Chrome 的 ho 扩展 也 有 一 个 针对 Opera 开 发 的 版 本 ， 安 竣 地 址 在 
http://tinyurl.com/3k3ecdy。 


天 e ba) 图 2-10， 在 通过 安装 了 h5o 
aew | 1jchome 浏览 器 访问 
€ Q © ApocalypsePage Original.html sz y HTML5 网 页 时 ,地址 栏 中 会 


1. How tha World Could End —| 出 现 一 个 纲要 图 标 , 单 击 它 
|, Mayan Doomsday EA 、 ^ 
2, Robot Takeover 就 会 弹 出 一 个 包含 整个 页 
j, Unexplained Singularity 
, Runaway Climate Change 面 纲 要 的 小 窗 E 
;, Global Epidemic 


RIGHT NOW, you're probably feeling pretty good. After all, life in 
the developed world is comfortable—probably more 
comfortable than it's been for the average human being 
throughout all of recorded history. 


But don't get too smug. There's still plenty of horrific ways it 
could all fall apart. In this article, you'll learn about a few of our 
favorites. 





25.2 ”基本 纲要 


要 知 违 日 己 网 页 的 纲要 是 什么 样子 , 可 以 想象 把 页 面 中 的 所 有 内 容 午 剥离 ,只 剩 下 编号 的 标 
题 元 系 〈*xh1>、xh2>、*<h3> 等 ) 中 的 文本 。 然 后 ， 根 据 它们 在 标记 中 的 位 置 缩 进 标题 ， 那 么 般 套 
最 次 的 标题 在 纲要 中 的 缩 进 也 最 多 。 

以 最 初 的 还 没有 应 用 HTMLS 元 系 之 前 的 局 示 录 文章 页 面 的 标记 为 例 : 


«body» 
«div class-" Header» 
<h1>How the World Could End«/h1» 














«div» 

ch2»Mayan Doomsday« /h2» 

eh Takeover</h2> 
ch2»Unexplained Singularity«/h2» 
ch2»Runaway Climate Change«/h2» 


«h2»Global Epidemic«/h2» 
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«div class-"Footer"» 

Iy 
</body> 
这 个 简单 的 结构 会 生成 如 下 所 示 的 纲要 : 
1. How the World Could End 

1. Mayan Doomsday 

2. Robot Takeover 

3. Unexplained Singularity 





4. Runaway Climate Change 
5. Global Epidemic 
两 个 级 别 的 标题 (<h1> 和 <h2> ) 就 创建 两 级 的 纲要 。 这 种 对 应 关系 与 字 处 理 软件 中 的 纲要 功 
能 类 似 。 比 如 ， 可 以 在 Word 2010 的 文档 结构 图 窗 格 中 看 到 类 似 的 纲要 。 
换 一 个 例子 ， 对 于 下 面 的 标记 : 


<h1i>Level-1 Heading</h1> 
<h2>Level-2 Heading</h2> 
«h2»Level-2 Heading</h2> 
«h3»Level-3 Heading</h3> 
«h2»Level-2 Heading</h2> 


会 生成 如 下 所 示 的 纲要 : 
1. 一 级 标题 

1. 二 级 标题 

2. 二 级 标题 

1. 三 级 标题 

3. 二 级 标题 
同样 ， 没 有 什么 意外 。 
最 后 , 纲要 算法 也 很 聪明 , 能 够 自动 忽略 跳 过 的 级 别 。 例如, 如果 你 写 的 标记 有 点 不 太 规 范 ， 

从 <h1> 和 直接 就 跳 到 了 <h3>: 


«hi1»Level-1 Heading</h1> 
«h2»Level-2 Heading</h2> 
<h1>Level-1 Heading</h2> 
<h3>Level-3 Heading</h3> 
«h2»Level-2 Heading</h2> 


那 会 得 到 如 下 纲要 : 
1. 一 级 标题 

1. 二 级 标题 
2. 一 级 标题 

1. 三 级 标题 

2. 二 级 标题 
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这 样 , 根据 其 文本 中 的 位 置 ,本 来 的 三 级 标题 与 二 级 标题 放 在 了 同一 层次 上 。 表 面 上 看 ， 这 
与 浏览 佛 喜 欢 干 的 自动 纠 错 关 似 , 但 实际 上 这 样 处 理 有 特殊 的 原因 。 在 茶 些 情况 下 ,网 页 可 能 是 
由 很 多 独立 的 部 分 拼 起 来 的 一 一 例如 ,可 能 会 包含 在 其 他 站 点 上 发 布 的 一 篇 文章 。 此 时 ,， 般 入 内 
容 的 标题 级 别 很 可 能 与 网 页 其 他 部 分 不 会 完美 地 匹配 。 但 由 于 纲要 算法 可 以 消除 这 些 差 异 , 这 种 
问题 目 然 也 就 不 是 问题 了 。 


2.5.3 SATA 


分 块 元 素 ( sectioning element ) 是 指 那 些 在 页 面 中 创建 新 的 、 般 套 纲 要 的 元 素 。 这 些 元 素 有 
<article> <aside> <nav> 和 section>。 要 理解 分 块 元 素 的 作用 ,可 以 想象 一 个 包含 两 个 <articley 
元 素 的 页 面 。 因 为 carticle> 是 一 个 分 块 元 系 ， 所 以 这 个 页 面 中 ( 至少 ) 有 3 个 纲要 : 整个 页 面 有 
一 个 纲要 、 每 篇 文 昔 有 一 个 般 矢 的 纲要 。 

为 了 进一步 弄 清 楚 到 底 是 什么 状况 ,我 们 来 看 一 看 用 HTML5 改 造 之 后 的 启示 录 文 草 页 面 : 


<body> 
<article> 
<header> 
<h1>How the World Could End</h1> 
































T 
<div class="Content"> 
<h2>Mayan Doomsday</h2> 
<h2>Robot Takeover</h2> 
«h2»Unexplained Singularity«/h2» 
ch2»Runavay Climate Change«/h2» 
«h2»Global Epidemic«/h2» 
«/div» 
«/article» 
«footer»? 


Cr 

</body> 

把 这 些 标记 复制 到 http://gsnedders.html5.org/outliner 中 ， 可 以 看 到 下 面 的 结 

1. Untitled Section 

1. How the World Could End 

1. Mayan Doomsday 
2. Robot Takeover 
3. Unexplained Singularity 
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4. Runaway Climate Change 
5. Global Epidemic 
这 个 纲要 开始 于 一 个 无 标题 的 区 块 (Untitled Section )， 也 就 是 最 上 层 的 <body> 元 素 。 然 后 ， 
«article»7Uz& JT — ARRAREN, RPE — 4 «h1»2628 ULT «h2»2038 o 
ATIR, Untitled Section 意 味 着 一 个 错误 。 尽 管 caside> 和 <nav> 元 系 可 以 不 市 标题 AB 
<article> 和 <section> 则 万 万 不 可 。 拿 前 面 的 例子 来 说 ， 无 标题 的 区 块 是 页 面 中 的 主 区 块 ， 属 于 
<body> 元 素 。 因 为 页 面 只 包含 一 个 carticle>, 所 以 页 面 本 身 没 有 必要 再 单独 带 一 个 标题 ， 出 现 这 
个 Untitled Section 也 没有 办 法 ， 你 可 以 忽略 它 。 
现在 ， 青 来 看 一 个 复杂 一 点 的 例子 ， 比 如 带 有 导航 侧 边 栏 的 启示 录 站 点 (参见 2.4 方 )。 把 相 
应 的 标记 放 到 纲要 生成 天 中 ， 可 以 得 到 如 下 结 采 : 
1. Apocalypse Today 
1. Untitled Section 
1. Articles 
2. About Us 
2. How the World Could End 
1. Mayan Doomsday 
2. Robot Takeover 
3. Untitled Section 























4. Unexplained Singularity 
5. Runaway Climate Change 
6. Global Epidemic 
XC—dHX, bNiCPBLER ARA RERCUAR. PRUDUUAE ANREIZ: 一 个 属于 侧 边栏 ,为 一 个 属 
于 文 草 。 此 外 ， 也 有 两 个 无 标题 区 块 ， 但 都 是 合乎 规范 的 一 一 第 一 个 是 侧 边 位 的 caside> 元 系 ， 
第 二 个 是 文章 中 醒目 引文 的 <aside> 元 素 。 

















注意 ”除了 分 块 元 素 之 外 ， 还 有 一 些 元 素 被 称 作 区 块根 (section root )。 这 些 元 素 不 是 从 已 有 纲 
要 向 下 分 支 ， 而 是 产生 自己 的 纲要 ， 但 不 会 出 现在 包含 页 面 的 主 纲要 视图 中 。 比 如 包含 
网 页 内 容 的 <body> 元 素 就 是 一 个 区 块根 ， 这 当然 合理 。 但 HTMLS 还 把 下 列 元 素 视 为 区 块 
根 : «blockquote», «td», «fieldset», «figure»jfe«details», 


分 块 元 素 对 复杂 页 面 的 意义 
分 块 对 于 联合 (syndication) FRA (aggregation) 都 有 很 大 意义 ， 这 两 种 方式 都 是 从 一 
个 页 面 中 取得 内 容 ， 然 后 注入 到 另 一 个 页 面 的 技术 。 
例如 ,设想 有 一 个 网 页 ， 包含 一 些 文章 的 节选 内 容 , 而 这 些 内容 都 来 自 另外 一 个 网 站 。 假 
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设 这 个 网 页 本 身 有 很 深 的 标题 谋 套 结构 ， 而 在 这 个 谋 套 结构 的 菜 个 地 方 一 一 比如 在 一 个 <h4> 
页 


在 传统 的 HTML 中 ， 我们 希望 抓 来 的 文章 中 的 一 级 标题 使 用 ch5> 元 素 ， 因 为 它 被 谱 套 在 
<h4> 下 方 。 可 是 ， 这 篇 文章 的 结构 本 来 是 针对 其 他 网 站 设计 的 ， 而 原来 的 页 面 没有 什么 诅 套 ， 
因此 其 标题 很 可 能 从 <h2> 甚 至 从 <h1> 开 始 。 虽然 这 不 影响 页 面 显 示 , 但 却 打 乱 了 标题 层级 ， 特 
别 是 对 屏幕 阅读 器 、 搜 索引 擎 以 及 其 他 页 面 处 理工 具 ， 则 会 造成 更 大 的 困难 。 

而 在 HTML5 中 , 这 个 页 面 根本 不 是 问题 。 只 要 你 把 这 篇 文章 襄 套 在 一 个 carticle> 元 素 中 ， 
那么 被 抓 过 来 的 内 容 就 会 变 成 它 自己 误 套 纲要 的 一 部 分 。 而 这 个 纲要 可 以 从 任意 级 别 的 标题 开 
始 ， 几 级 标题 都 无 所 谓 。 真 正 重要 的 是 标题 在 包含 文档 中 的 位 置 。 因 此 ， 如 果 这 个 <articley 
元 素 排 在 ch4> 后 面 ， 那么 文章 中 的 第 一 级 标题 从 逻辑 上 就 像 ch5> 一 样 ， 第 二 级 标题 从 逻辑 上 就 
像 <h6> 一 样 ， 以 此 类 推 。 

最 后 的 结论 是 : HIMLS 有 一 个 讲究 逻辑 的 纲要 机 制 ， 让 组 合 文档 变 得 更 容易 。 在 这 种 纲 
要 机 制 下 ， 标 题 的 位 置 变 得 更 加 重要 ， 而 实际 的 级 别 则 没有 那么 重要 了 。 这 样 ， 可 以 免得 你 搬 
起 石头 磺 到 自己 的 脚 。 


2.5.4 解决 一 个 纲要 问题 


到 现在 为 止 , 你 已 经 看 到 本 革 的 示例 ,也 看 到 了 这 些 示例 生成 的 纲要 。 而 且 , 你 看 到 的 纲要 
也 都 非常 符合 规范 。 可 是 ， 有 时 候 也 会 出 现 一 个 问题 。 比 如 ， 你 创建 了 以 下 页 面 结构 : 


«body» 
«article» 
«hi»Natural Wonders to Visit Before You Die«/h1» 





«h2»In North America«/h2» 

ch3»The Grand Canyon«/h3» 
«h3»Yellowstone National Park«/h3» 
«h2»In the Rest of the World«/h2» 
人 

«h3»Galapagos Islands«/h3» 

«h3»The Swiss Alps«/h3» 


«/article» 
</body> 


然后 ， 你 党 得 这 个 页 面 的 纲要 应 该 是 这 样 的 : 
1. Untitled Section for the «body» 
]. Natural Wonders to Visit Before You Die 
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1. In North America 

1. The Grand Canyon 

2. Yellowstone National Park 
2. In the Rest of the World 
3. Untitled Section for the «aside» 





1. Galapagos Islands 
2. The Swiss Alps 
但 实际 的 纲要 却 是 这 样 的 : 
1. Untitled Section for the «body» 
1. Natural Wonders to Visit Before You Die 
1. In North America 
1. The Grand Canyon 
2. Yellowstone National Park 
2. In the Rest of the World 
3. Untitled Section for the «aside» 
4. Galapagos Islands 
5. The Swiss Alps 
不 知 怎么 地 , <ha Tf Z Ho BAIT «aside» E 5 BER WAT «h3»26 28 bs T ER, 让 它们 在 
逻辑 上 跟 <h2> 元 素 排 在 了 同一 层次 上 。 这 显然 不 是 你 想 要 的 结果 。 
为 了 解决 这 个 问题 ， 首 先 需 要 理解 HTML5S 的 纲要 机 制 ， 即 每 次 遇 到 编号 标题 元 素 (<h1>、 
<h2>、<h3> ， 等 等 )， 只 要 该 元 素 不 在 某 个 区 块 顶部， 就 会 为 它 目 动 创建 一 个 新 的 区 块 。 
对 这 个 例子 来 说 ， 纲 要 机 制 对 一 开头 的 <h1> 元 素 什 么 都 不 做 ， 因 为 它 位 于 <article> 区 块 的 
顶部 。 但 纲要 算法 却 会 为 接 下 来 的 <h2> 和 <h3> 创 建新 的 区 块 ， 就 好 像 你 写 了 如 下 标记 一 样 : 


«body» 
«article» 
«hi»Natural Wonders to Visit Before You Die«/h1» 


























«section» 
«h2»In North America«/h2» 
«section» 
«h3»The Grand Canyon</h3> 
«/section» 
«section» 
«h3»Yellowstone National Park«/h3» 
«/section» 
«/section» 


«section» 
«h2»In the Rest of the World«/h2» 
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«/section» 
«aside»...«/aside» 
«section» 
«h3»Galapagos Islands«/h3» 
«/section» 
«section» 
«h3»The Swiss Alps«/h3» 
«/section» 
«Jarticle» 
</body> 


多 数 情况 下 ， 这些 上 自动 创建 的 区 块 不 是 问题 。 事实 上 ,这 些 区 块 通常 还 很 用， 因为 这 样 可 
以 确保 未 正确 编号 的 标题 仍然 能 排 在 正确 的 纲要 级 别 上 《正如 前 面 的 附注 栏 “ 分 块 元 系 对 复杂 页 
面 的 意义 ”中 所 说 的 )。 但 这 样 做 的 代价 束 古 偶尔 会 出 现 小 差错 ， 就 像 我 们 这 个 例子 一 样 。 

从 生成 的 纲要 来 看 ， 一 开始 部 没有 问题 。 顶 部 的 <h1> 目 己 一 个 级 别 (因为 它 已 经 在 一 个 
<article> 里 面 了 ), 接 下 来 会 为 第 一 个 ch2> 元 条 创建 一 个 子 区 块 ,然后 再 为 这 个 子 区 块 里 面 的 <h3> 
分 别 创建 各 目的 子 区 块 ， 以 此 类 推 。 当 纲要 算法 磁 到 <aside> 元 素 时 ， 问 题 就 出 现 了 。 既 然 磁 到 
了 <aside>， 那 就 说 明 要 关闭 当前 为 <h2> 创 建 的 子 区 块 了 。 而 关闭 这 个 子 区 块 之 后 ， 再 为 asidey 
后 面 的 <h3> 创 建 子 区 块 ， 就 会 导致 它们 在 逻辑 上 与 前 面 的 <h2> 在 纲要 中 处 于 同一 个 层次 上 。 

为 了 纠正 这 个 问题 ， 需 要 通过 自己 定义 区 块 和 子 区 块 , 来 代替 纲要 机 制 的 自动 创 建行 为 。 对 
我 们 这 个 例子 来 次 ， 束 是 要 避免 第 二 个 <h2> 区 块 被 过 后 地 关闭 。 在 标记 中 明确 为 该 ch2> 定 义 一 个 
区 块 即 可 解决 问题 : 


«body» 
«article» 
«hi»Natural Wonders to Visit Before You Die«/h1» 



































«h2»In North America«/h2» 


«h3»The Grand Canyon«/h3» 


«h3»Yellowstone National Park«/h3» 


«section» 
«h2»In the Rest of the World«/h2» 
ETE 
«h3»Galapagos Islands«/h3» 
ch3»The Swiss Alps«/h3» 

gi sections 


«/article» 
«/body» 
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这 样 ， 纲 要 算法 就 不 必 再 为 第 二 个 <h2> 目 动 创 建 区 块 了 ， 因 而 也 就 避免 了 在 它 发 现 <aside> 
时 去 关闭 该 区 块 的 风险 。 虽然 也 可 以 为 文档 中 的 所 有 标题 都 定义 区 块 , 但 没有 必要 因此 把 标记 搞 
乱 ， 毕 竟 像 这 样 修改 一 个 地 方 就 可 以 解决 问题 。 





注意 “ 另 一 个 办 法 是 用 《div> 替 换 人 aside>。 因 为 div> 不 是 分 块 元 素 ， 因 此 不 会 导致 前 面 的 区 块 
意外 关闭 。 








使 用 <aside> 元 素 并 不 会 经 党 导致 这 种 问题 。 比 如 ， 前 面 文章 中 使 用 caside> 包 含 醒 目 引 文 ， 
AMREF; 那 是 因为 caside> 正 好 在 两 个 <h2> 元 系 之 间 。 可 是 ， 假 如 你 不 小 心 在 两 个 不 同 级 别 
的 标题 之 间 插 入 了 一 个 分 块 元 系 ， 那 就 要 检查 一 下 纲要 ， 看 这 样 干 是 不 是 说 得 过 去 。 








提示 “如果 你 对 本 节 讨 论 的 所 有 纲要 相关 的 概念 还 有 点 迷糊 ， 不 必 担 心 。 说 老实 话 ， 纲 要 这 件 
事 是 很 多 Web 开 发 人 员 都 不 会 十 分 关心 的 (至 少 目前 是 这 样 )。 最 好 是 把 HTMLS 的 纲要 机 
制 当 成 一 种 质量 保障 工具 ， 它 有 时 候 可 以 帮 上 你 的 忙 。 通 过 在 纲要 生成 器 (参见 2.5.1 节 
给 出 的 工具 ) 中 查看 自己 的 标记 ， 有 可 能 发 现 其 他 问题 导致 的 错误 ， 而 且 能 够 确保 你 正 
确 地 使 用 语义 元 素 。 
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2 9 5 


EE 





有 意义 的 标记 





一 草 , 我 们 了 解 了 HTMLS 的 语义 元 兹 。 通 过 使 用 这 些 语 义 元 素 , 可 以 为 网 页 创建 清晰 、 
有 逮 辑 的 结构 ， 而 且 能 够 适应 未 来 更 聪明 的 浏览 锅 、 搜 索引 擎 和 辅助 设备 。 
不 过 , 关于 语义 的 故事 并 没有 讲 完 。 语 义 就 是 为 标记 赋予 某 种 意义 ， 然 后 可 以 在 不 同 的 标记 
中 放 和 不同 的 信息 。 第 2 童 谈 到 的 语义 元 素 完 全 是 页 面 结 构 方 面 的 ， 即 用 它们 传达 页 面 布 局 中 大 
一 些 的 内 容 块 及 所 有 区 块 的 用 途 。 但 文本 级 信息 同样 也 有 语义 , 这 样 的 语义 元 素 用 于 描述 较 小 一 
些 的 内 容 片 段 。 可 以 使 用 文本 级 语义 元 素 标 注 出 重要 的 信息 , 以 人 免 它 们 被 淹没 在 一 望 无 际 的 网 页 
大 海 之 中 。 比 如 ， 可 以 为 名 字 、 地 址 、 活 动 清单 、 产 品 、 处 方 、 和 餐馆 评价 加 注 语 义 元 素 。 然 后 ， 
各 种 各 样 的 设备 和 工具 一 一 从 新 潮 的 浏览 夯 搬 件 ， 到 专业 的 搜索 引擎 ， 便 可 各 取 所 需 。 
本 草 ， 我 们 先 来 回顾 一 下 列 人 HTMLS 语 言 规范 的 几 个 语义 元 系 。 之 后 ， 你 还 会 学 到 一 些 文 
本 级 语义 元 素 , 在 今天 使 用 它们 没有 什么 困难 。 接 下 来 , 我 们 会 介绍 几 个 致力 于 解决 文本 级 语义 
问题 的 前 沿 标 准 。 换 句 话 说， 我 们 会 详细 说 一 说 微 数 据 (microdata )， 它 最 初 是 作为 HTML5 规 范 
的 一 部 分 被 提出 来 的 , 但 现在 已 经 成 了 一 个 独立 的 标准 , 由 W3C 负 责 管 理 和 推进 。 在 此 期 间 , 你 
还 会 看 到 一 些 超前 的 服务 ， 这 些 服务 已 经 在 实际 应 用 中 使 用 微 数 据 了 。 


3.1 回顾 语义 元 素 


我 们 从 页 面 结构 相关 的 元 素 ( 表 3-1 钙 一 个 简单 的 回顾 ) 开始 讨论 霹 义 是 有 原因 的 。 原 因 也 
很 简单 ， 页 面 结构 容易 把 握 。 毕 葛 ， 绝 大 多 数 网 站 在 规划 布局 时 ， 都 会 使 用 为 数 不 多 的 几 种 设 
计 元 系 ( 页 眉 、 页 脚 、 侧 边栏 、 及 单 )， 绪 果 网 站 的 布局 一 一 除了 外 观 闻 饰 有 所 不 同 外 一 一 都 很 
相似 。 























表 3-1 ”页面 结构 相关 的 语义 元 素 
元 素 说 AH 








«article» 表示 一 篇 任何 形式 的 文章 ， 即 类 似 新 闻 报 道 、 论 坛 帖子 或 博客 文章 (不 包括 评论 或 作者 简介 ) 等 能 
够 独立 的 内 容 区 块 

«aside» 表示 独立 于 周围 内 容 的 一 个 完整 的 内 容 块 。 例 如 ， 可 以 用 <aside> 创 建 一 个 附注 栏 ， 其 中 包含 与 主 文 
章 相 关 的 内 容 或 链接 








<figure> 和 表示 一 幅 插 图 。 其 中 <figcaption> 元 素 标注 图 题 (插图 的 标题 ) ,而 <figure> 元 素 标注 <figcaption> 
<figcaption> ”和 插入 图 片 的 <img> 元 素 。 目 标 是 反映 图 片 与 图 题 之 间 是 关联 的 
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元 X 说 明 

«footer» 表示 页 面 底部 的 页 脚 。 通 常 是 很 小 的 一 块 内 容 , 包括 小 字号 的 版 权 声明 、 简 单 的 链接 (比如 Abonut 
Us, Get Support 等 ) 

«header» 表示 增强 型 的 标题 ， 可 以 包含 HIML 标 题 和 其 他 内 容 。 其 他 内 容 可 以 是 标志 、 作 者 署名 或 一 组 指 
癌 后 面 内 容 的 导航 链接 

<hgroup> 表示 增强 型 的 标题 ， 分 组 两 个 或 多 个 标题 元 素 ， 不 包含 其 他 内 容 。 其 主要 目的 是 把 标题 和 副标题 
联系 到 一 起 

«nav» 表示 页 面 中 重要 的 一 组 链接 。 其 中 的 链接 可 以 指 问 当 前 页 面 的 主题 ,也 可 以 指向 网 站 的 其 他 页 面 。 
实际 上 ， 一 个 页 面 中 包含 多 个 <nav> 也 很 正常 

«section» 表示 文档 中 的 一 个 区 块 , 或 者 表示 一 组 文档 。<section> 是 一 个 通用 容器 ， 只 有 一 条 规则 : 其 中 的 
内 容 必 须 开 始 于 一 个 标题 。 应 该 在 其 他 语义 元 素 (如 <article> 和 <aside>) 不 适用 的 情况 下 再 选 
用 <section> 











文本 级 语义 可 不 是 一 块 好 踢 的 骨头 。 因 为 人 们 产生 内 容 的 类 型 干 差 万 别 。 如 果 HTML5 为 每 
一 种 可 能 的 内 容 类 型 都 发 明 一 个 元 素 , 那 这 门 语 言 中 包含 的 元 素 可 就 数不胜数 了 。 问 题 的 复杂 性 
EF, 结构 化 的 内 容 是 由 很 多 更 小 的 内 容 户 段 构成 的 ,而 组 织 这 些 内 容 户 段 的 方式 又 没有 一 定之 
规 。 比 如 , 要 在 页 面 中 插入 最 简单 的 邮政 地 址 , 都 可 能 需要 好 几 个 元 素 , 比如 <address>、<name>、 
<street>、<postalcode>、<country>， 等 等 。 

HTML5 的 策略 是 双管齐下 。 一 方面 ， 它 只 增强 了 很 少 几 个 文本 级 语义 元 素 ; 另 一 方面 ， 更 
重要 的 是 ，HIMLS 文 持 一 个 独立 的 微 数据 标准 。 这 个 标准 为 人 们 提供 了 扩展 的 可 能 性 ， 任 何人 
都 可 以 定义 上 自己 的 信息 ,在 自己 的 页 面 中 为 信息 添加 标注 。 本 章 会 介绍 这 两 方面 的 主题 。 首 移 ， 
我 们 来 认识 三 个 新 的 文本 级 的 语义 元 系 : <time>、<output> 和 <mark>。 


3.1.1 使 用 <time> 标 注 日 期 和 时 间 


网 页 中 经 常会 出 现 日 期 和 时 间 信 息 。 例 如 ， 绝 大 多 数 博客 文章 的 未 尾 都 有 发 表 时 间 。 然 而 ， 
人 们 却 一 直 没有 标准 的 方式 来 标注 日 期 ， 因 此 其 他 程序 ( 如 搜索 引 警 ) 也 不 容易 提取 这 些 信息 ， 
基本 上 都 是 靠 猜 。 好 了 ， 现 在 ctimey 元 素 可 以 解决 这 个 问题 。 通 过 它 可 以 标注 日 期 、 时 间或 日 期 
与 时 间 的 组 合 。 先 看 一 个 例子 : 


The party starts «time»2012-03-21«/time». 






































注意 ”用 <time> 元 素来 标注 ( 不 包含 时 间 的 ) 日 期 似乎 有 点 违反 直觉 ,我 告诉 你 吧 , 这 只 是 HTML5S 
的 古怪 行为 之 一 。 更 恰当 的 元 素 显 然 应 该 是 cdatetime>， 但 他 们 硬是 不 用 。 





<time> 元 条 在 这 里 要 扮演 两 个 角色 。 Er, 它 表示 日 期 和 时 间 位 于 标记 中 的 哪个 地 方 。 其 次 ， 








注 1: 根据 HTML5 规 范 , 《footer> 元 素 不 仅 可 以 用 于 页 面 的 页 脚 ， 也 可 以 用 于 文章 中 的 文 脚 。( 译 者 注 ) 
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它 以 任何 软件 程序 都 能 理解 的 方式 提供 日 期 和 时 间 。 前 面 的 例子 符合 第 二 个 角色 的 要 求 , 使 用 了 
通用 的 日 期 格式 ， 即 按 年 月 日 这 个 顺序 ， 年 4 位 数 、 月 和 日 均 为 2 位 数 ， 分 隅 符 为 短 划 线 。 换 句 话 
说 ， 日 期 的 格式 如 下 : 

YYYY-MM-DD 

不 过 ， 对 于 浏 响 网 页 的 人 ,你 可 以 随便 采用 任何 格式 来 显示 日 期 。 实 际 上 ,任何 文本 形式 也 
都 是 允许 的 ， 只 要 你 在 datetime 属 性 中 提供 计算 机 能 看 异 的 通用 格式 的 日 期 束 行 ， 比 如 : 


The party starts «time datetime="2012-03-21">March 21«sup»st«/sup»«/time». 


在 浏览 硕 中 的 效果 如 下 所 未 : 

The party starts March 21*. 

对 于 时 间 部 分 ，<time> 也 有 类 似 的 规则 ， 标 准 的 时 间 格 式 如 下 : 

HH :MM+00 :00 

首先 是 2 位 数 的 小 时 〈24 小 时 制 )， 然 后 是 2 位 数 的 分 钟 。 随 后 是 一 个 加 号 〈+ )， 表 示 时 区 。 
时 区 并 不 是 可 有 可 无 的 不 知道 自己 在 哪个 时 区 ， 请 参考 这 里 : http://en.wikipedia.org/wiki/ 
Time zone。 例如 ,纽约 是 东部 时 区 ， 表示 UTC-05:00。 要 表示 纽约 时 间 下 午 4:30， 应 该 使 用 以 下 
标记 : 

Parties start every night at «time datetime="16:30-5:00">4:30 p.m.</time>. 

这 样 , 看 你 的 网 页 的 人 ,能 看 到 他 们 想 看 到 的 格式 ， 而 搜索 机 器 人 和 其 他 软件 则 能 看 到 它们 
H EMRE, Tf HoEZGIE X., 

最 后 ,通过 组 合 使 用 两 种 标准 格式 ， 可 以 指定 某 个 日 期 的 某 个 时 间 : 日 期 在 前 ， 中 间 跟 一 个 
大 写 的 字母 7， 时 间 在 后 : 


The party starts «time datetime="2012-03-21T16:30-5:00">March 21«sup»st«/sup» 
at 4:30 p.m.«/time». 


Jj). <time> kA —"lpubdate/TE, "Ro gi PE CIA ctime»7628 PrTEBR«article» ) 对 
应 一 个 发 表 日 期 ， 可 以 使 用 这 个 属性 。 下 面 就 是 一 个 例子 : 


Published on «time datetime-"2011-03-21" pubdate»March 31, 2011</time>. 


























注意 ”因为 5time> 元 素 纯粹 是 信息 性 的 ， 没 有 任何 附加 的 样式 ， 所 以 可 以 在 任何 浏览 器 中 使 用 。 
不 必 担 心 兼容 性 问题 ,不 过 ,假如 你 想 给 <time> 元 素 添加 点 样式 ,需要 针对 Internet Explorer 
使 用 2.3 市 介绍 的 方法 。 


3.1.2 ”使 用 <output> 标 注 JavaScript 返 回 值 


HTML5 还 包含 一 个 语义 元 系 <output>， 它 能 使 某 种 JavaScript 驱 动 的 页 面 更 加 清晰 。 实 际 上 ， 
这 个 元 系 就 是 一 个 占 位 从 ， 用 于 展示 一 小 段 计 算 后 的 信息 。 
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例如 ,假设 你 要 创建 如 图 3-1 所 示 的 一 个 页 面 。 用 户 可 以 在 这 个 页 面 中 输入 某 些 信息 。 然 后 
用 脚本 取得 这 些 信息 ， 进 行 计算 ， 并 将 RR EE 下 面 。 

通常 的 做 法 是 给 占 位 符 指定 一 个 人 DD 属性， 这 样 JavaScript 代 码 就 可 以 在 计算 时 找到 它 。Web 
开发 人 员 一 般 将 cspan> 元 素 用 做 占 位 符 ， 而 唯一 的 问题 就 是 该 元 素 不 提供 任何 语义 : 

«p»Your BMI: «span id="result"></span></p> 

以 下 则 是 使 用 HTML5 的 更 有 意义 的 版 本 : 

<p>Your BMI: <output id="result"></output></p> 

实际 的 JavaScript 代 码 无 需 任 何 改 变 ， 因 为 它 只 根据 人 D 属 性 查找 元 系 ， 不 考虑 元 系 类 型 : 


var resultElement = document.getElementById("result"); 
































注意 ”在 使 用 coutput> 之 前 ， 别 忘 了 像 2.3 节 介绍 的 那样 为 Internet Explorer 包 含 相 应 的 脚本 。 否 
则 ， 在 旧版 本 的 正中 无 法 通过 JavaScript 来 访问 该 元 素 。 


cc» |ELIME ES) 图 3-1: 这 是 一 个 由 来 已 久 的 设计 模式 ， 输 入 数 


Bit: VO | 字 , 单 击 按钮 就 可 以 得 到 答案 
GC 以 BmiCalculator.htm EN 


Body Mass Index Calculator 


Height: 7 feet 
4 icl 
Weight: 230 pounds 


epica 
Your BMI: 224 
and Above | Obese 





M, puRRBApAOKRH—«form2uzk&o Texte. m xGARES3TOME. EHA 
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«form action-" 4" id-"bmiCalculator"» 
«label for-"feet inches"»Height:«/label» 
«input name-"feet"» feet«br» 

«input name-"inches"» inches«br» 


«label for-"pounds"»Weight:«/label» 
«input name= pounds > pounds«br»«br» 
dome 
如 果 你 想 让 目 己 的 <output> 元 桑 变 得 更 聪明 一 些 , 可 以 为 它 添加 form 和 for 属 性 , 前 者 的 值 是 
包含 相关 控件 的 表单 ID ， 后 者 的 值 是 以 空格 分 隅 的 相关 控件 的 ID。 比 如 ， 下 面 就 是 一 个 例子 : 


«p»Your BMI: «output id-"result" form-"bmiCalculator" 
for-"feet inches pounds"»«/output»«/p» 


这 些 属性 实际 上 什么 也 不 干 ， 唯 一 的 用 处 就 是 表明 <output> 从 哪些 控件 获取 结 琳 这 一 信息 。 
不 过 , 你 肯定 会 因为 考虑 到 了 语义 而 获得 加 分 。 如 来 其 他 人 知 要 编辑 你 的 页 面 ， 那 这 些 属性 可 以 
玫 他 们 理 清 思路 。 














提示 “如 果 你 对 表单 还 不 很 熟悉,， 第 4 章 会 详细 介绍 。 假 如 你 对 JavaScript 还 不 如 你 对 世界 语 了 解 
得 多 ， 那 可 以 先 通过 附录 也 复习 一 下 。 而 假如 你 想 自 己 试 一 试 这 个 页 面 ， 可 以 在 Www.pro- 
setech.comyhtml$ 中 找到 所 有 示例 页 面 。 


3.1.3 ”使 用 <mark> 标 注 突 显 文本 


<mark> 元 系 用 于 标注 一 段 文本 ， 这 段 文本 会 突出 显示 。 在 需要 引用 其 他 人 的 内 容 ， 而 你 想 引 
起 别人 注意 时 ， 就 可 以 使 用 <mark> 元 素 : 


<p>In 2009, Facebook made a bold grab to own everyone's content, 
«em»forever«/em». This is the text they put in their terms of service:«/p» 
«blockquote»You hereby grant Facebook an «mark»irrevocable, perpetual, 
non-exclusive, transferable, fully paid, worldwide license«/mark» (with the 
right to sublicense) to «mark»use, copy, publish«/mark», stream, store, 
retain, publicly perform or display, transmit, scan, reformat, modify, edit, 
frame, translate, excerpt, adapt, create derivative works and distribute 
(through multiple tiers), «mark»any user content you post«/mark» 

















e ibtoekauotes 

如 图 3-2 所 示 ， 浏 览 器 会 给 cmark> 中 的 文本 添加 黄色 背景 。 

也 可 以 使 用 cmark> 标 注重 要 的 内 容 或 关键 字 一 一 就 像 搜 索引 擎 在 搜索 结 打 中 显示 匹配 的 文 
本 那样 ， 还 可 以 与 <del>〈 删 除 的 文本 ) 和 <ins> (插入 的 文本 ) 组 合 使 用 ， 以 标注 文档 的 变化 。 

实话 实说 ，<mark> 元 素 其 实 并 不 十 分 必要 。HTML5 规 范 认为 它 是 一 个 语义 元 素 ， 但 实际 上 
它 更 多 地 则 是 被 用 于 表现 目的 。 默 认 情 况 下 ， 被 标注 的 文本 会 市 有 浅黄 色 背 景 ( 见 图 3-2 ), 不 过 
当然 可 以 通过 样式 表 规 则 为 它 应 用 不 同 的 样式 。 
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A D) 图 3-2: 在 这 个 例子 中 ， 


N pm 


"- © | (& «mark» Example X | | À v i$ 我 11] 使 FH «mark» 7t zx 突 
出 显示 了 引用 的 一 段 话 


In 2009, Facebook made a bold grab to own everyone's content, forever. This 1s the text 


they put in their terms of service: 中 的 重要 细 证 


You hereby grant Facebook an 
(with the right to sublicense) to use, 
, Stream, store, retain, publicly perform or display, transmit, scan, 
reformat, modify, edit, frame, translate, excerpt, adapt, create derivative works 
and distribute (through multiple tiers), any user content you post on or in 
connection with the Facebook Service or the promotion thereof subject only to 
your privacy settings or enable a user to post. 


Fortunately, they've since backtracked and weakened the language considerably. Here's the 
relevant secticn today: 


and you can 
control how it is shared through your privacy and application settings. In 
addition: 1. For content that 1s covered by intellectual propertv rights, like 
photos and videos ("IP content"), you specifically give us the following 
permission, subject to your privacy and application settings: 





on or in connection with Facebook. 
unless your content has been 
shared with others, and they have not deleted it. 








提示 <mark> 元 素 的 目的 并 不 在 于 样式 。 毕 竞 ， 突 出 显示 文本 的 方式 已 经 有 很 多 了 了。 因此， 应 
该 坚持 只 用 <mark>( 结合 你 想 使 用 的 任意 CSS 格 式 ) 来 传达 适当 的 语义 。 这 里 有 一 条 经 验 ， 
那 就 是 使 用 <mark> 来 吸引 人 注意 那些 变 得 很 重要 的 文本 。 比 如 ， 关 于 写作 该 文本 的 讨论 ， 
或 者 它 是 用 户 应 该 执行 的 任务 。 


即使 你 想 治 用 黑 认 的 黄色 背景 ， 也 应 该 为 不 文 持 HIMLS 的 训 览 融 添 加 后 备 样式 表 。 以 下 就 
是 相应 的 样式 规则 : 


mark { 
background-color: yellow; 
color: black; 


j 
为 了 让 <mark> 在 Internet Explorer 中 能 够 正常 获得 样式 , 还 应 该 像 2.3 节 介绍 的 包含 相应 的 脚本 
文件 。 


3.2 其 他 语义 标准 


此 时 ,你 可 能 会 想 ，HTML 中 还 缺少 很 多 语义 元 系 。 没 错 ， 现 在 可 以 标注 日 期 、 突 出 显示 文 
本 ,但 对 其 他 常见 的 信息 怎么 办 ， 比 如 ， 名字、 地 址 、 企 业 名 录 、 产 品 说 明 、 个 人 简介 ? HTMLS 
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有 意 不 在 这 方面 投入 精力 ,因为 其 制定 者 不 想 把 这 门 语言 过 分 地 特殊 化 ,否则 就 避免 不 了 “有 人 
欢喜 有 人 忧 ”的 怪圈 。 如 果真 想 在 语义 方面 有 更 大 的 作为 ， 就 必须 跳出 HIML5S 语 言 核心 的 犯 畴 ， 
去 寻找 几 种 更 适合 你 网 页 的 标准 。 

通过 标记 巧妙 地 表达 请 义 并 不 是 什么 新 点 子 。 事 实 上 ， 早 在 HTML5S 还 是 一 个 约 想 ， 存 在 于 
WHATWG 编 辑 Ian Hickson 的 大 脑 中 的 时 候 ， 就 有 非常 多 的 Web 开 发 人 员 大 声 疾 呼 ， 要 求 为 他 们 
提供 有 意义 的 标记 。 他 们 的 目标 也 不 尽 相 同 ， 有些 人 和 而 望 提高 无 隐 但 性 ， 有 些 人 打算 要 进行 数据 
挫 据 ， 而 还 有 一 些 人 仅仅 是 而 望 目 己 的 简历 多 一 个 闪光 点 。 不 过 ,所 有 这 些 人 在 标准 HIML 语 言 
中 都 找 不 到 目 己 想 要 的 标记 。 由 此 ,一 些 新 标准 的 应 运 而 生 也 就 不 足 为 奇 了 。 

接 下 来 儿 节 ,我们 介绍 4 种 这 样 的 标准 。 首 匈 ， 了 网 是 ARIA， 它 致力 于 提升 屏幕 阅 读 末 中 的 无 
障碍 性 。 其 次 ， 我 们 要 看 一 下 另外 三 种 并 存 的 手段 ， 它 们 用 于 描述 不 同 的 内 容 ， 比 如 联系 人 、 地 
址 、 企 业 和 名录 或 其 他 各 种 HTML 页 面 可 能 出 现 的 内 容 。 



































3.2.1 ARIA 


ARIA ( Accessible Rich Internet Application， 无 障碍 富 因 特 网 应 用 ) 是 一 个 还 在 制定 中 的 标 
准 ， 它 规定 了 在 任意 HTML 元素 上 使 用 的 属性 ， 而 通过 这 些 属 性 可 以 为 屏幕 阅 谈 硕 提供 额外 的 信 
县 。 例 如 ，ARIA 中 规定 了 一 个 role 属 性 ， 表 示 所 在 元 素 的 用 途 。 下 面 就 以 一 个 表示 页 眉 的 <divy 
元 系 为 例 : 

«div class-"header"» 

通过 为 其 指定 信 为 banner 的 fole 属 性 ， 可 以 告诉 屏 帮 阅读 硕 它 的 用 途 是 保存 横幅 广告 : 

«div class="header" role-"banner"» 

当然 ， 我 们 上 一 草 刚 刚 学 过 ，HTMLS 为 标注 页 眉 提 供 了 一 个 场 义 元 素 。 因 此 ， 这 时 候 最 合 

«header role-"banner"» 

这 个 例子 说 明了 两 方面 问题 : 首先 ，ARIA 规 定 了 一 些 推荐 的 角色 名 。( 要 了 解 所 有 角色 名 ， 
请 参考 规范 中 相应 的 部 分 : http://www.w3.org/TR/wai-aria/rolestlandmark roles. ) 其次, 部 分 ARIA 
与 新 HTML5 语 义 元 素 重 复 一 一 这 是 合情合理 的 , 因为 ARIA 早 于 HTML5。 不 过 , 重复 也 不 是 完全 
重复 。 比 如 ， 有 些 角 色 名 在 HTMLS 中 确实 也 出 现 了 【(〈 像 "banner” 和 “article”)， 而 有 些 则 可 能 
在 将 来 才 会 出 现 (如 “toolbar” 和 “search”)。 

ARIA 还 针对 HTML 表 单 定义 了 属性 。 文 本 框 的 aria-required 属 性 表示 用 户 必须 输入 值 。 而 
文本 框 的 aria-invalid 属 性 表示 当前 值 不 正确 。 这 些 属性 可 以 让 屏 贬 阅读 硕 用 户 , 特别 是 视力 不 
好 的 用 户 ， 不 会 因为 看 不 到 提示 信息 〈 比 如 必 填 字段 劳 的 星 号 ， 或 闪烁 的 红色 错误 岁 标 ) 而 受 
影 啊 。 

为 了 恰当 地 采用 ARIA ， 需 要 学 习 标 准 ， 也 要 人 花 时 间 评 审 目 己 的 标记 。 对 于 是 否 人 得 为 此 投 
入 ，Web 开 发 人 员 的 看 法 不 一 。 因 为 这 个 标准 尚未 制定 完成 , 而 HTML5 叉 提供 了 一 些 类 似 的 语义 
元 系 ， 且 用 起 来 省 事 儿 不 少 。 不 过 ,假如 你 真 的 想 创建 一 个 可 以 无 障碍 访问 的 网 站 ， 必 须 既 要 考 
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I&ARIA, X IEHTMLS., KNR BOSSES RRARIA, AÁNSREHTMLS. 


注意 ART OUR ARIA (全 名 是 WAI-ARIA， 因 为 它 是 由 Web Accessibility Initiative 工 作 组 负责 
制定 的 ) 的 更 多 信息 ， 请 参考 其 规范 : http://www.w3.org/TR/wai-aria/。 


3.2.2 RDFa 


RDFa ( Resource Description Framework， 资 源 描 述 框架 ) tÆ fp: FH Ss P m 9] PAATE 
细 信 息 的 标准 。 与 本 章 讨论 的 其 他 方式 不 同 ，RDFa 有 一 个 明显 的 优点 : 它 是 一 个 稳定 不 变 的 标 
准 。RDFa 也 有 两 个 明显 的 缺点 : 一 是 复杂 , 二 是 针对 XHTML 而 非 HTML5。 换 句 话说 , 通信 RDFa 
元 数据 后 的 网 页 比 最 初 要 长 得 多 ,而且 显得 很 尝 重 。 目 前 ， 不 少 极为 聪明 的 网 站 开发 人 员 也 想 出 
了 一 些 好 办 法 ， 让 我 们 能 够 在 HTML5 中 使 用 RDFa。 可 是 ， 毕 竞 它 植 根 于 更 严格 的 语法 和 无 法 变 
通 的 XMIL 规 则 ， 所 以 也 有 可 能 不 会 对 HTML5 产 生 太 大 影响 。 

本 章 不 会 详细 讨论 RDFa， 不 过 假如 你 希望 7 了解 更 多 信息 ， 可 以 在 Wikipedia 上 看 到 完整 的 介 
7H: http:/en.wikipedia.org/wiki/RDFa。 或 者 ， 也 可 以 参考 3.3.1 节 介绍 的 Google Rich Snippets， 其 
中 所 有 示例 都 有 对 应 的 RDFa 版 本 。 























3.2.3 Microformats 


Microformats 是 一 种 在 网 页 中 骸 入 元 数据 的 简单 而 又 比较 合理 的 方式 。 Microformats 并 没有 和 想 
成 为 任何 官方 标准 。 相 反 , 它 只 是 对 一 组 统一 的 约定 进行 了 宽松 的 描述 ， 这 些 约定 有 助 于 网 页 之 
间 共 至 结构 化 信息 ， 但 义 不 会 导致 像 采 用 RDFa 那 样 复杂 。Microformats 因 此 获得 了 巨大 的 成 功 ， 
合 歌 最 近 的 一 次 调查 显示 ， 在 包含 丰富 元 数据 的 页 面 中 ， 有 94% 都 基于 Microformats。 














注意 ”读者 可 能 会 想 ， 既 然 Microformats 如 此 受 欢 迎 ， 那 么 语义 Web 之 战 似 乎 已 经 分 出 胜 负 了 。 
但 事实 上 并 没有 这 么 快 ， 且 听 我 细 说 缘由 。 首 先 ， 绝 大 多 数 网 页 根本 没有 包含 任何 语义 
数据 。 其 次 ， 那 些 使 用 Microformats 的 网 页 ， 大 多 数 都 只 将 其 用 于 两 个 用 途 : 联系 信息 和 
活动 列表 。 最 后 ，Microformats 的 简单 有 可 能 阻碍 它 在 更 先进 任务 中 的 应 用 ， 特 别 是 
HTMLS 流 行 起 来 之 后 。 不 过 ， 虽 然 Microformats 不 会 很 快 就 无 处 不 在 ， 但 仍然 是 不 能 忽 
略 它 的 。 








在 标记 数据 之 前 ,首先 选择 要 使 用 的 微 格式 。 最 常用 的 微 格式 不 过 几 十 个 而 已 ， 且 其 中 大 部 
分 还 在 调整 和 修订 中 。 要 了 解 可 以 使 用 哪些 微 格 式 以 及 相关 的 用 法 说 明 ， 请 参考 这 里 : 
http://microformats.org/wiki。 不 过 , 下面 我 们 还 是 要 介绍 两 个 最 常见 的 微 格式 : hCard 或 hCalendar。 

1. 使 用 hCard 标注 联系 信息 

hCard 是 一 种 针对 联系 信息 而 设计 的 通用 微 格 式 ， 可 用 于 人 、 公 司 、 组 织 或 某 一 地 点 的 联系 
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言 息 。 根 据 最 新 统计 ，Web 上 包含 20 多 亿 的 hCard， 因 而 它 当 之 无 愧 地 成 为 迄今 为 止 最 流行 的 微 
格式 。 

Microformats 的 应 用 方式 比较 新 帘 ， 它们 附加 在 通常 用 于 添加 样式 的 class 属 性 上 。 你 可 以 根 
据 数 据 的 类 型 ,使 用 茶 些 标 准 的 样式 名 来 标注 数据 。 然 后 ， 其 他 程序 可 以 读 取 你 的 标记 ， 提 取 数 
据 并 通过 检查 class 属 性 来 确定 数据 的 含义 。 要 创建 hCard， 需 要 找 一 个 根 元 素 ， 为 其 class 属 性 
指定 vcard 值 。 在 这 个 元 素 内 部 ， 至 少 要 包含 一 个 格式 化 的 名 字 ， 这 外 名 字 必 须 包含 在 为 一 个 元 
素 中 。 内 部 的 这 个 元 素 的 class 属 性 信 必 须 是 fn。 比 如 下 面 就 是 按 要 求 写 的 一 段 标记 : 

«div class= VCard > 


«div class="fn">Mike Rowe Formatte«/div» 
«/div» 


在 通过 class 属 性 来 应 用 微 格式 的 时 候 , 不 用 考虑 为 该 类 名 创建 匹配 的 样式 。( 事实 上 ,这 样 
做 只 会 章 来 麻烦 。) 相反 ， 此 时 的 类 名 完全 用 于 不 同 的 用 途 ， 即 告知 外 界 你 标注 的 数据 具有 良好 
的 格式 和 特定 的 含义 。 
尽管 hCard 只 需要 一 个 名 字 ， 但 多 数 情 况 下 它 要 包含 更 多 细 让 ， 比 如 邮政 编码 、 电 子 邮件 、 
网 站 URL、 电 话 号 码 、 生 日 、 照 片 、 头 衔 、 组 织 名称 , 等 等 。 只 要 使 用 的 类 名 正确 , 就 可 以 在 vcard 
元 素 中 以 任意 顺序 包含 这 些 信息 。 请 看 下 面 的 例子 ， 其 中 重要 的 类 名 都 加 粗 了 。 
«div class-"vcard"» 
«div class-"fn'»Mike Rowe Formatte«/div» 
«img class-"photo" src-"face.jpg" alt= Mike s Face"? 
«div class-"title"»Web Developer«/div» 
«div class-"org"»The Magic Semantic Company«/div» 
«a class-"url" href-"http://www.magicsemantics.com"»www.magicsemantics.com«/a» 


«div class-"tel'»641-545-0234«/div» 
</div> 



































提示 “要 了 解 所 有 受 支 持 的 hCard 属 性 ， 请 参考 http:/microformats.org/wiki/hcard。 











好 了 ， 前 面 的 例子 展示 了 怎么 从 头 开始 创建 与 hCard 微 格式 匹配 的 标记 。 不 过 ， 更 常见 的 情 
况 可 能 是 改进 已 有 的 网 页 ， 为 其 添加 微 格式 。 比 如 ， 有 一 个 页 面 中 包含 联系 信息 ,你 想 把 其 中 的 
言 息 标注 起 来 ， 以 便 理 解 hCard 微 格式 的 程序 能 够 访问 这 些 信息 。 这 个 任务 相当 简单 ， 只 要 按照 
下 列 提示 做 即 可 。 
口 通常 ， 有 些 重要 的 数据 会 混在 一 些 不 需要 标注 的 内 容 里 。 此 时 ， 可 以 为 这 些 重要 的 数据 
分 别 添加 新 元 素 。 如 果 想 用 块 级 元 素 ， 就 使 用 <div>; 如 果 想 用 行 级 元 系 ， 怠 使 用 <span> 。 
口 不 用 担心 其 他 之 有 不 同类 名 的 元 泰 。 在 读 取 微 格 式 时 ， 程 序 会 忽略 所 有 种 非 标 准 类 名 的 
内 容 。 
口 如 果 要 在 微 格式 中 添加 照片 ， 可 以 使 用 <img> 元 素 ; 如 果 要 添加 链接 ， 可 以 使 用 <a> 元 素 。 
剩 下 的 工作 ， 无 非 就 是 为 一 些 普 通 文本 添加 标记 而 已 了 。 
下 面 就 来 看 一 个 典型 的 例子 。 想 象 一 下 ， 你 打开 了 一 个 About Me 页 面 (如 图 3-3 所 示 )， 其 中 
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包含 如 下 内 容 : 


<h1>About Me«/h1» 


«img src-"face.jpg" alt="Mike's Face > 
<p>This website is the work of «b»Mike Rowe Formatte«/b». 
His friends know him as <b>The Big M«/b».«/p» 


«p»You can contact him where he works, at 
The Magic Semantic Company (phone 
641-545-0234 and ask for Mike).«/p» 





«p»Or, visit him there at:«br» 

42 Jordan Gordon Street, 6th Floor«br» 

San Francisco, CA 94105«br» 

USA«br» 

«a href-"http: //www.magicsemantics.com"»www.magicsemantics.com«/a» 


| 图 3-3: 包含 作者 联系 信息 的 About Me 页 面 
y [| hCard Example 


e Œ Q hCard.html 


About Me 


This webste is the work of Mike Rowe Formatte. 
His friends know him as The Big M. 


You can contact him where he works, at The 
Magic Semantic Company (phone 641-525-0234 
and ask fcr Mike). 


Or, visit him there at: 

42 Jordan Gordon Street, 6th Floor 
San Francisco, CA 94105 

USA 

www.magicsemantics.com 
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以 下 就 是 使 用 微 格式 之 后 的 标记 : 
<h1>About Me«/h1» 
«div class-"vcard"» 
«img class-"photo" src-"face.jpg' alt-"Mike's Face"? 
<p>This website is the work of 
«span class-"title" style-"display:none"»Web Developer«/span» 


«b class-z"fn'»Mike Rowe Formatte«/b». 
His friends know him as «b class-"nickname"»The Big M«/b».«/p» 


«p»You can contact him where he works, at 
«span class-"org"»The Magic Semantic Company«/span» (phone 
«span class-"tel"»641-545-0234«/span» and ask for Mike).«/p» 


«p»Or, visit him there at:«br» 

«span class-"street-address"»42 Jordan Gordon Street, 6th Floor«/span»«br» 
«span class-"locality"»San Francisco«/span», 

«span class-"region"»CA«/span» 

«span class-"postal-code"»94105«/span»«br» 

«span class-"country-name"»USA«/span»«br» 

«a class-"url" href-"http://www.magicsemantics.com"»www.magicsemantics.com«/a» 

«/div» 

这 个 例子 涉及 了 几 个 技巧 。 

a 为 添加 vcard 而 新 增 了 <span> 元 素 ; 

O 在 合适 的 元 素 上 这 加 了 class 属 性 。 比 如， 既然 有 了 包含 名 字 信 息 的 <b> 元 素 ， 就 没有 必要 

再 添加 多 余 的 <span> 元 素 了 。( 当然 ， 你 可 以 这 样 做 。 比 如 ， 如 采 你 既 想 应 用 格式 又 想 标 
注 名 字 ， 同 时 又 想 让 样式 表 与 微 格 式 保持 分 离 ， 那 可 能 会 写成 这 样 <b class= 
"KeywordEmphasis"»«span class="fn">Mike Rowe Formatte</span></b>。) 

口 使 用 隐藏 的 内 容 指出 了 人 的 头衔 (是 一 位 Web 开 发 人 员 )。 这 个 信息 没有 必要 显示 在 页 面 

E, 因为 通过 这 句 话 就 能 看 出 来 了 : "This website is the work of..." C 本 网 站 由 …… 开 发 )。 
不 过 ， 这 个 技巧 还 是 有 和 争议 的 ， 因 为 某 些 工具 ( 如 谷歌 ) 会 忽略 页 面 中 不 显示 的 信息 。 

既然 都 费劲 地 做 了 这 么 多 , 下面 就 该 看 一 看 这 样 做 有 什么 好 处 了 。 尺 管 没有 广 哆 带 能 识别 微 
格式 ( 至 少 在 本 书写 作 时 还 没有 )， 但 有 很 多 插件 和 脚本 可 以 赋予 浏览 带 这 种 能 力 。 如 何 利用 这 
些微 格式 ? 不 难 想 索 。 比 如 ， 训 览 硕 可 以 检测 页 面 中 的 hCard， 将 其 中 的 信息 列 在 一 个 面板 中 ， 
同时 给 你 一 个 命令 , 让 你 能 像 收藏 页 面 一 样 把 某 个 人 的 联系 信息 快速 添加 到 地 址 短 中 。 在 这 里 可 
VAT S SEU Usi: http://microformats.org/wiki/browsers. 

Oomph ( http://oomph.codeplex.com/ ) 就 是 这 样 一 个 工具 ， 可 以 将 它 作 为 一 个 插件 安装 到 
Internet Explorer 中 。 然 后 ,Oomph 就 会 从 你 访问 的 页 面 中 搜索 三 个 微 格式 : hCard ( 联系 人 信息 )、 
hCalendar ( 活动 列表 ) 和 hMedia ( 图 人像、 音频 和 视频 )。 如 果 它 找到 某 个 微 格式 ， 就 会 在 窗口 左 
上 和 角 添 加 一 个 小 图 标 ( 见 图 3-4 )。 单 击 这 个 图 标 ， 就 能 看 到 它 找到 的 联系 人 、 活 动 和 媒 体 文件 ， 
以 及 相应 的 链接 。 
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Ds E EEES) mna. p. 图 标 表明 Oomph 至 少 找到 了 一 种 
€ > C Ofile///C/HTMLS/Chapter?52003/hCard.html | 微 格式 ; P: 单 击 图 标 , 可 以 看 到 完整 的 信息 ， 
包括 显示 相应 地 理 位 置 的 地 图 和 一 个 将 联系 
人 信息 快速 转移 到 电子 邮件 地 址 簿 中 的 选项 。 
如 果 页 面 中 包含 多 个 微 格式 ,也 可 以 看 到 让 你 

查看 hCard、hCalendar 和 hMedia 的 链接 














[35 hCard Example Xm 
c CQ © file///C/HTMLS/Chapter?62003/hCard.html 





Mike Rowe Formatte 
agic Semantic 


The 


http- /www.magicsemantics.com 


Y MES 


Export to Outlook 


visitmix.com/labs/.../vcard.ashx?... 

















Ai, Oomph 在 正 有 意思 的 地 方 在 于 , 还 有 为 一 种 方式 使 用 它 ， 即 通过 JavaScript 库 。 在 这 种 
情况 下 ， 你 所 要 做 的 就 是 在 页 面 中 引用 相应 的 脚本 : 


«head» 
«meta charset= Utf-8 > 
«title»hCard Example«/title» 
«script src-"jquery-1.3.2.min.js"»«/script» 
«script src-"oomph.min.js"»«/script» 
Md 


这 样 ， 所 有 访问 你 页 面 的 人 , AEEA SS, 都 可 以 通过 弹出 的 微 格 式 按钮 来 增强 体 
验 。 实 际 上 ， 图 3-4 中 的 谷歌 Chrome 就 是 这 样 来 利用 微 格 式 的 。 有 兴趣 的 读 首 可 以 到 
http://www.prosetech.com/html5 试 一 试 。 








注意 ”我们 应 该 把 Oomph 看 做 一 个 概念 验证 en 微 格式 做 什么 ,但 不 能 把 它 当 
成 真正 的 工具 来 用 。 微 格式 将 来 最 好 是 A6 SIEULADLS Y, Ds Firefox. Safari 
中 的 RSS 一 样 。 比 如 ， eg 博客 时 ， 它 会 自动 检测 RSS 源 ， 并 允许 你 创 


建 一 个 “ 活 的 ”书签 。 类 似 这 样 的 功能 ， 正 是 可 以 利用 微 格式 的 最 佳 途 径 。 


2. 使 用 hCalendar 标 注 活动 
流行 程度 仅 次 于 hCard 的 是 hCalendar， 它 是 标注 活动 的 一 种 简单 方式 。 比 如 ， 可 以 使 用 
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hCalendar 标 注 约 会 、 会 议 、 人 假日、 产品 发 布 时 间 、 商 店 开 业 时 间 等 。 目 前 ，Web 上 有 数 千 万 的 网 
页 中 有 hCalendar 话 动 。 图 3-$ 展 示 了 一 个 例子 。 





m | 3-5. Facebook 的 所 有 活动 页 面 都 使 

| Ki Ben & Jerry's Free Cone Day | Facebook | t Y | 用 h Clan day 微 $ 名 X ER = xt x H 使 用 
€ ^ |E] htp//www.facebook.com/event.php?eic-192075224168154 -CI 会 | 加 :| j 

EP Pi SpA j 占 IX ^A H ` 

B Contacts w [E Evens) - Locations” |. Tagspaces” E3 Bookmarks: E Resources: 上 引 Options hCard 微 格式 标注 Be d j mn 2 











On April 12th, 10 am - 9 pm stop by Seaport Village's i.. ^| Export Event 5j 以 通过 Operator( http://addons.mozilla. 


LA- 


F Av MS 
Export All Add to 30 Boxes org/firefox/ addon/operator ) 等 浏览 器 插 
| Bookmark with Firefox 


Add to Google Calendar 件 人 人 页 E 中 提取 IT zH 信息 


| Sign Up | Facebook helps you connect and share with the peo Add to Yahoo! Calendar 


Ben & Jerry's Free Cone Day 
Share : Public Event 


Tuesday, April 12 * 9:00am - 9:00pm 
Seaport Village 


Seaport Village 





























在 创建 了 第 一 个 hCard 之 后 ， 理 解 hCalendar 就 没有 什么 困难 了 。 首 先 ， 需 要 把 活动 列表 包装 
在 一 个 元 素 中 ， 将 这 个 元 素 的 class 属 性 值 设 置 为 vevent。 在 这 个 元 素 内 部 ， 至 少 要 包含 两 段 信 
县 :开始 日 期 ( 使 用 类 名 dtstart ) 和 说 明 ( fii 25 44 summary ),。 此 外 ,也 可 以 选择 http://microformats. 
org/wiki/hcalendar 中 列 出 的 其 他 可 选 的 属性 ， 包 括 结束 日 期 工 持 续 时 间 、 地 点 ， 以 及 包含 更 详细 
言 息 的 页 面 URL。 下 面 来 看 一 个 例子 : 


«div class= Vevent > 

<h2 class-"summary"»Web Developer Clam Bake«/h2» 

«p»I'm hosting a party!«/p» 

«p»It's 

«span classz"dtstart" title-"2011-10-25T13:30"»Tuesday, October 25, 

1:30PM«/span» 

at the «span class-"location"»Deep Sea Hotel, San Francisco, CA«/span»«/p» 
«/div» 


在 格式 化 日 期 时 ， 必 须 使 用 3.1.1 节 介绍 的 通用 日 期 格式 。 不 过 ， 也 有 一 个 折 中 的 方案 ， 即 通 
过 title 属 性 提供 计算 机 可 以 理解 的 日 期 信息 ， 然 后 在 页 面 中 显示 任何 格式 的 日 期 。 遗 憾 的 是 ， 
目前 微 格 式 还 不 能 自动 使 用 HTMLS <time> 元 素 的 datetime 属 性 中 的 信息 ( 稍 后 就 会 介绍 到 ， 微 
数据 标准 解决 了 这 个 问题 )。 








3.2.4 Microdata 


Microdata 是 尝试 解决 语义 标记 问题 的 妨 一 种 选择 。 它 最 早 是 HTML5 规 范 的 一 部 分 ， 后 来 分 
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离 出 来 成 为 一 个 独立 的 标准 : http://dev.w3.org/html5/md/。Microdata 末 用 的 方法 与 RDFa 类 似 , 但 
简化 了 一 些 。 另外 , 与 微 格 式 不 同 , 它 使 用 自己 的 属性 , 因而 不 存在 与 样式 表 规 则 冲突 的 风险 (也 
不 会 让 Web 开 发 人 员 感 到 困惑 )。 这 种 设计 意味 者 微 数 据 更 讲究 逻辑 性 ， 而 且 更 容易 改编 为 适合 
你 网 页 的 语言 。 不 过 这 一 切 是 以 牺牲 向 洁 性 为 代价 的 , 采用 微 数 据 的 网 页 要 比 采 用 微 格 式 的 网 页 
大 很 多 。 

















注意 ”作为 最 新 的 语义 标准 ， 在 HTMLS 兴 起 的 这 一 波浪 潮 中 ， 微 数据 是 可 以 乘势 而 上 ， 还 是 为 
其 他 既定 的 标准 让 路 (比如 以 简洁 见长 的 微 格式 和 以 满足 复杂 需求 为 目标 的 各 种 RDFa 应 
用 形式 )， 目 前 还 不 明朗 。 但 无 论 如 何 ， 学 习 微 数据 还 是 值得 的 。 下 一 节 我 们 将 会 介绍 ， 
谷歌 已 经 支持 微 数据 ， 而 且 让 它 看 起 来 很 像 RDFa。 这 样 ， 无 论 将 来 哪个 标准 流行 ， 你 都 
可 以 顺畅 地 切换 过 去 。 


在 标注 微 数据 时 ， 首 先 要 给 相应 元 系 〈 如 果 连 元 素 也 需要 新 添加 ， 那 div> 元 素 从 逻辑 上 更 
像 一 个 容 需 ) 添加 让 emscope 和 itemtype 属 性 。 其 中 ，itemscope 属 性 表示 开始 一 段 新 的 语义 内 容 ， 
而 itemtype 属 性 表示 内 容 中 包含 的 数据 类 型 . 


«div itemscope itemtype="http://data-vocabulary.org/Person"> 





«/div» 

标识 数据 类 型 时 ， 要 使 用 一 个 叫 XML 命 名 空间 的 预定 义 的 、 独 一 无 二 的 字符 串 。 在 这 个 例 
子 中 ，http:/data-vocabulary.org/Person 就 是 XML 命名 空间 ， 其 中 定义 了 用 于 编写 联系 人 信息 的 数 
据 格 式 。 

XML 命 名 空间 一 般 是 URL 形 式 的 。 有 了 时候， 在 浏览 莫 中 打开 相应 的 URL， 可 以 看 到 对 相应 
数据 类 型 的 说 明 CURT TJThttp://data-vocabulary.org/Person— f£ ),。 不 过 ,XML 合 名 空间 不 一 定 
非 要 在 网 上 有 对 应 的 页 面 ， 甚 至 不 必 是 URL 形 式 。 换 名 话说 ,是 什么 形式 ， 完 全 取决 于 创建 相应 
格式 的 人 。URL 形 式 的 好 处 是 利用 个 人 或 公司 的 域名 ， 从 而 确保 命名 空间 的 唯一 性 。 这 样 ， 就 不 
应 该 有 其 他 人 使 用 同一 个 命名 空间 来 创建 不 同 的 数据 格式 ， 也 就 避免 了 混 消 。 

定义 完 容 需 元 素 后 ， 就 可 以 开始 下 一 步 了 。 在 容器 元 素 内 ， 使 用 itemprop 属 性 来 标注 重要 信 
息 。 这 种 方式 与 微 格式 的 基本 规则 相同 通过 公认 的 itemprop 名 称 ， 其 他 软件 可 以 从 关联 的 元 
率 中 取得 信息 。 实 际 上 ， 微 数据 与 微 格式 最 重要 的 不 同 就 是 ， 微 数据 标注 元 素 时 使 用 itemprop 属 
性 ， 而 不 是 class 属 性 。 


«div itemscope itemtype-"http://data-vocabulary.org/Person"» 
«span itemprop-"name"»Mike Rowe Formatte«/span». 


























cdi 

微 数 据 与 微 格 式 相 比 , 结构 上 可 以 更 复杂 一 些 。 例 如, 微 数据 的 一 种 数据 类 型 可 以 般 套 男 一 
种 数据 类 型 。 就 说 联系 人 信息 吧 ， 你 可 以 在 其 中 能 入 几 条 地 址 信息 。 从 技术 上 讲 ， 所 有 地 址 信息 
都 由 一 个 数据 类 型 定义 ， 而 这 个 数据 类 型 则 通过 一 个 不 同 的 XML 命名 空间 来 标识 。 因 此 ， 需 要 
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另外 用 一 个 <div> 或 <span> 元 素 ， 并 为 其 指定 itemscope 和 itemtype 属 性 ， 如 下 所 示 : 


«div itemscope itemtype-"http://data-vocabulary.org/Person"» 


«span itemprop-"address" itemscope 
itemtype-"http://data-vocabulary.org/Address"» 
«span itemprop-"street-address"542 Jordan Gordon Street, 

6th Floor«/span»«br» 

«span itemprop-"locality"»San Francisco«/span?, 
«span itemprop-"region"»CA«/span» 

</span> 

</div> 


知道 了 这 个 规则 ， 我 们 可 以 使 用 微 数 据 来 改进 之 前 的 About Me 页 面 ( 053.2.3 5 )。 以 下 是 最 
终 的 结 末 ， 修 改 的 地 方 和 都 加 粗 了 : 


«hi»About Me«/h1» 





«div itemscope itemtype-"http://data-vocabulary.org/Person"» 
«img itemprop-"photo" src-"face.jpg' alt-"Mike's Face"? 
«p»This website is the work of 
«span itemprop-"title" style-"display:none"»Web Developer«/span» 
«b itemprop-"name"»Mike Rowe Formatte«/b». 
His friends know him as «b itemprop-"nickname"»The Big M«/b».«/p» 


«p»You can contact him where he works, at 
«span itemprop-"affiliation"»The Magic Semantic Company«/span» (phone 
«span itemprop-"tel"»641-545-0234«/span» and ask for Mike).«/p» 


«p»Or, visit him there at:«br» 
«span itemprop-"address" itemscope 
itemtype-"http://data-vocabulary.org/Address"» 
«span itemprop-"street-address"»42 Jordan Gordon Street, 
6th Floor«/span»«br» 
«span itemprop-"locality"»San Francisco«/span»?, 
«span itemprop-"region"»CA«/span» 
«span itemprop-"postal-code"»94105«/span»«br» 
«span itemprop-"country-name"»USA«/span»«br» 
</span> 
<a itemprop="url" href="http://www.magicsemantics.com">www.magicsemantics. 
com</a> 
</div> 


RAPRA T, zUnT-BIBhCard BI T- TR TRADE (03.2.37) TER class 
变 成 了 itemprop， 但 属性 的 值 却 几乎 相同 (不同 的 只 有 fn 变 成 了 name，org 变 成 了 affiliation )。 
如 果 你 熟悉 RDFa， 甚 至 会 发 现 更 多 一 致 之 处 ， 因 为 微 数据 和 RDFa 使 用 的 都 是 http:/www- 
data-vocabulary.org/Person/ 数 据 格式 。 








注意 ”这 三 种 富 语义 数据 标准 一 一 RDFa、 微 数据 和 微 格式 一 一 很 多 地 方 都 是 相似 的 。 虽然 它们 
不 完全 兼容 ， 但 使 用 其 中 一 种 标准 的 技能 ， 多 数 情况 下 都 适用 于 其 他 标准 。 
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微 数 据 有 一 个 明显 的 缺陷 : 1C TET DU V iE T mot JavaScript A M 71 rii P OOo EE 
据 。 不 过 ， 微 数据 对 于 增强 网 页 搜索 效 朱 还 是 很 有 用 的 ， 而 这 正 是 下 一 节 要 介绍 的 主题 。 








3.3 Google Rich Snippets 








TE EL C. BS 9 pg RUUILAGRS: X EIUS, eR Webb RAPANA NIE. BE 
忠实 的 Web 开 发 者 ， 也 要 判断 做 这 些 人 额外 的 工作 ( 以 及 把 标记 搞 得 不 那么 整洁 ) 是 否 值 得 。 如 采 
所 有 浏 顺带 都 绝顶 聪明 ， 都 能 识别 这 些 语 义 该 有 多 好 啊 ! 但 冷酷 的 现实 是 ， 只 有 届 指 可 数 的 几 个 
不 那么 知名 的 浏览 硕 插 件 可 供 使 用 。 

好 在 ， 为 标记 添加 丰 军 的 语义 还 有 一 个 理由 : SEO (Search Engine Optimization， 搜 索引 擎 
优化 ) SEO 是 一 种 艺术 ， 可 以 让 你 的 网 站 更 容易 被 搜索 引擎 曝光 ; 换 句 话说 ， 你 的 网 页 能 够 更 
频繁 地 出 现在 搜索 结果 中 ,对 某 些 关 键 词 能 有 更 好 的 排名 ,更 有 可 能 吸引 用 户 点 击 访问 你 的 网 站 。 
谷歌 的 Rich Snippets 功 能 可 以 提升 用 户 点 击 访问 你 的 网 站 的 可 能 性 。 你 要 做 的 就 是 在 页 面 中 放 入 
正确 的 语义 数据 ， 然 后 谷歌 可 以 找到 它们 并 构建 一 个 漂亮 的 搜索 列表 ， 让 你 的 网 站 能 知 立 鸡 群 。 

在 使 用 Rich Snippets 之 前 ,有 必要 先 了 解 一 下 这 个 概 仿 。Rich Snippets 是 谷歌 推出 的 一 个 工具 ， 
能 够 将 RDFa、 微 格式 和 微 数据 结合 起 来 。 前 面 已 经 介绍 过 了 ， 这 儿 种 请 义 标准 有 很 多 共性 ， 而 
昌都 是 为 了 解决 相同 的 问题 。 谷 歌 的 目标 是 对 它们 一 视 同 仁 ， 因 此 无 论 你 使 用 哪 种 标准 ， 都 没有 
问题 。( 接 下 来 的 例子 将 使 用 微 数 据 ， 同 时 也 遵循 HTML5 最 新 的 语义 标准 。) 

要 了 解 Rich Snippets 文 持 的 标准 信息 ， 请 参考 谷歌 的 文档 : http://tinyurl.com/Google- 
RichSnippets。 这 个 页 面 不 仅 介 绍 了 RDFa、 微 格式 和 微 数 据 , 还 展示 了 很 多 不 同 的 片段 的 示例 ( 如 
联系 人 人 信息、 活动、 产品、 评论、 配方 ， 等 等 。) 更 赞 的 是 ， 谷 歌 在 每 个 例子 中 都 提供 了 RDFa、 
微 格式 和 微 数 据 的 版 本 ， 通 过 这 些 例 子 ， 你 可 以 全 面 擎 握 所 有 语义 标准 的 使 用 方法 。 


3.3.1 增强 搜索 结果 

要 了 解 Google Rich Snippets 如 何 工 作 ， 可 以 使 用 Google Rich Snippets Testing Tool。 这 个 工具 
会 检测 你 提供 的 页 面 , 展示 Google 从 中 提取 出 来 的 语义 数据 以 及 Google 如 何 利 用 这 些 数据 定制 该 
页 面 在 用 户 搜索 结 采 中 显示 的 方式 。 









































注意 Rich Snippets Testing Tool 的 用 处 体现 在 两 方面 。 首 先 ， 它 能 帮 你 验证 语义 标记 。( 如 果 
Google 无 法 全 部 提取 出 你 放 到 页 面 中 的 信息 ， 或 者 其 中 茶 些 信息 被 标记 为 错误 的 属性 ， 
就 说 明 你 可 能 有 地 方 做 错 了 。) 其 次 ， 它 能 向 你 展示 语义 数据 对 出 现在 Google 搜 索 结果 中 
页 面 外 观 的 影响 。 


要 使 用 Rich Snippets Testing Tool， 可 以 参考 如 下 步骤 。 
(1) TTJFhttp://www.google.com/webmasters/tools/richsnippets 。 


这 个 页 面 中 包含 一 个 文本 框 ( 见 图 3-6 )。 
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(2) 在 文本 框 中 输入 完整 的 页 面 URL。 

Rich Snippets Testing Tool 唯 一 的 缺点 是 只 能 检测 在 线 页 面 ， 不 能 检测 保存 在 计算 机 人 硬盘 上 的 
Xf. 

(3) 单 击 Preview 按 钮 。 

这 样 ， 就 可 以 预 移 结 采 ( 见 图 3-6 )。 预 "p 主意 两 部 分 ， 一 是 Google search preview 部 分 ， 
其 中 包含 页 面 在 Google 搜 索 结 果 中 的 样子 。 男 一 个 是 Extracted rich snippet data from the page, H 
中 包含 Google 能 够 从 页 面 义 数据 。 














Google 用 灰色 把 一 些 语 图 3-6. 在 此 ，Goosle 找 到 了 
你 想 让 Google 检 测 的 页 面 义 数 据 显示 在 这 一 行 : g 


HX EA 人 信息 ZU 和 地 址 信息 ION ( 基 
è . X 

Rich Snippets Testing Tool Tos 下 向 数据 的 例子 ) ; 

Use the Rich Snippets Testing Tool to check that Google can £orrectly parse your structured data markup 有 di 这 些 信 县 d Google É R H 

and display it in search results. 标题 下 方 添加 了 一 行 灰 色 的 

Test your website 文本 ， 把 联系 人 信息 显示 了 


Enter a web page URL to see how it may appear in search reshlts: 出 来 


http;//prosetech.com/prosetech/microdata.html| 


Examples: Reviews, People, Events, Recipes, Product 





Google search preview 


Microdata Example 

san Francisco CA - Web Developer - The Magic Semantic Company 

The excerpt from the page will show up here. The reason we can't show text from your 
webpage is because the text depends on the query the user types. 
www.prosetech.com/prosetech/microdata.html - Cached - Similar 


Note that there is no guarantee that a Rich Snippet will be shown for this page on actual search results. 
For more details, see the FAQ. 


Extracted rich snippet data from the page 





Item 
Type: http-//data-vocabulary.org/person 
photo = http-//www.sugarbeat.ca/prosetech/face.jpg 
title = Web Developer 
name = Mike Rowe Formatte 
nickname = The Big M 
affiliation - The Magic Semantic Company 
tel = 641-545-0234 
address = /tem( 1) 
url = http-//www.magicsemantics.com/ 


Item 1 
Type: http-//data-vocabulary.org/address 
street-address = 42 Jordan Gordon Street, 6th Floor 
locality = San Francisco 
region = CA 
postal-code = 94105 
country-name = USA 








Google 也 找到 Google 找 到 了 页 面 
了 地 址 信息 ”中 的 联系 人 信息 
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提示 。 如果 你 看 到 了 “Insufficient data to generate the preview" ( 没有 足够 的 数据 生成 预览 )， 有 
三 种 可 能 。 第 一 ， 你 的 标记 可 能 有 错误。 此 时 ， 查 看 一 下 Google 提 取出 来 的 原始 数据 ， 
确保 它 找到 了 你 放 在 页 面 中 的 所 有 数据 。 如 果 不 是 这 个 问题 ， 那 有 可 能 是 你 使 用 了 某 个 
数据 类 型 ， 而 Google 尚 未 支持 该 类 型 ， 或 者 你 添加 的 属性 还 未 达到 Google 要 求 的 最 低 数 
目 。 实 在 不 行 ， 可 以 拿 你 的 标记 与 Google 的 例子 (http://tinyurl.com/GoogleRichSnippets ) 
进行 对 比 。 





Google 使 用 的 强调 联系 人 信息 ( 图 3-6 ) 的 方法 比较 受 限 制 。 不 过 ，Google 能 识别 的 富 数据 
类 型 仅 限于 联系 人 信息 。 本 章 前 面 ， 我 们 介绍 了 如 何 使 用 微 格式 定义 活动 ( 见 3.2.3 节 )。 如果 你 
在 页 面 中 添加 一 系列 活动 ， 那 Google 可 能 会 把 相关 信息 显示 在 搜索 结果 下 面 ， 如 图 3-7 所 示 。 











i ; : Xp AMI AZA: 
The Fillmore New York at Irving Plaza Concert Tickets, Schedule ... 图 3-7， 这 个 示例 页 面 中 包含 三 个 酒 
Buy The Fillmore New York at Irving Plaza tickets and find concert schedules, venue 动 o A 果 你 提 at 的 URL 中 tUe ILE 


information, end seating charts for The Fillmore New York at Irving ... E ENN P 
Led Zeppelin 2 Sat. Jan 23 a ( 像 这 里 这 样 ) ， 那 Google 会 把 它 


Cheap Trick with Jason Falkner... Mon, .an 25 、 Pub L exc 13x 
Hip Hop Karaoke Championship Fri, Jan 29 们 转换 成 可 点 击 的 链接 
www.livenation.com/.. /the-fillmore-new-york-at-irving-plaza-new-york-ny-tickets - 

Cached - Similar - 


Google 也 能 识别 企业 名 录 《〈 处 理 方式 与 处 理 个 人 联系 信息 类 似 入 Sed (下 一 方 介绍 相关 的 
例子 ) 和 评论 〈 下 面 马 上 会 讨论 到 )。 

接 下 来 的 例子 展示 了 一 些 标记 , 我 们 需要 把 其 中 的 评论 文本 转换 为 可 识别 的 评论 微 数 据 。 相 
关 的 数据 标准 定义 请 参考 http://data-vocabulary.org/Review。 其 中 关键 的 属性 有 itemreviewed (在 
这 个 例子 中 是 餐馆 )、reviewer 和 description。 此 外 ， 还 可 以 给 出 一 句 话 的 概述 (summary ), 3€ 
写 或 提交 评论 的 时 间 ( dtreviewed， 支 持 HTML5 的 <time> 元 素 )， 以 及 从 0 到 5 的 一 个 星 级 评分 
( rating ). 

以 下 就 是 一 个 例子 ， 其 中 加 粗 了 所 有 人 微 数 据 : 


«div itemscope itemtype="http://data-vocabulary.org/Review"> 

<h1 itemprop-"itemreviewed"»Jan's Pizza House«/h1» 

«p»Reviewed by «span itemprop-"reviewer"»Jared Elberadi«/span» on 

«time itemprop-"dtreviewed" datetime-"2011-01-26"»January 26«/time».«p» 

«p itemprop-"summary"»Pretty bad, and then the Health Department showed 

up.«/p» 

«p itemprop-"description"»I had an urge to mack on some pizza, and this 
place was the only joint around. It looked like a bit of a dive, but I went 
in hoping to find an undiscovered gem. Instead, I watched a Health 
Department inspector closing the place down. Verdict? I didn't get to 
finish my pizza, and the inspector recommends a Hep-C shot.«/p» 

«p»Rating: «span itemprop-"rating"50.5«/span»«/p» 

«/div» 
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把 这 些 数据 放 到 页 面 中 ，Google 会 给 出 特殊 处 理 (图 3-8 )。 





Jan's Pizza House 图 3-8: 搜索 结果 确实 突出 了 评论 ， 
YrDE HB pyiaw Dy J arec iBrai fi- J 1 2 b. 20 | `E t 
Li Reviaw by Jared Elberadi - Jan 26, 2011 而 且 评 价 星 级 也 非常 抢眼 


The excerpt from the page will show up here. The reason we cant show text from your 
webpage is because the text depends on the query the user types. 
www.sugarbeat.ca/prosetech/microdata review.html - Cached - Similar 





怎么 防止 Google 对 你 的 语义 数据 视而不见 


样 做 。 Google 自 己 有 一 套 半 保密 的 规则 , 这 些 规则 决定 了 搜索 用 户 是 否 能 看 到 语义 信息 。 不 过 ， 
有 一 些 做 法 肯定 能 让 Google 忽 略 你 的 数据 。 
口语 义 数据 不 是 主要 内 容 。 换 名 话说 , 假如 你 在 一 个 介绍 飞 蝎 钓 鱼 的 页 面 中 硬 加 进去 联系 
人 信息 ， 那 Google 就 不 太 可 能 使 用 该 信息 。( 想 想 看 ， 搜 索 用 户 在 找到 这 个 页 面 时 ， 他 
想 知 道 的 是 有 关 钓 鱼 的 信息 ,此 时 在 页 面 标题 下 面 显示 你 的 地 址 和 公司 没有 什么 意义 。) 
另 一 方面 , 假如 你 在 自己 的 简历 页 面 中 加 入 联系 人 信息 , 那么 该 信息 被 采用 的 可 能 性 就 
大 得 多 。 
口 语义 数据 被 隐藏 了 。Google 不 会 使 用 通过 CSS 隐 藏 的 语义 数据 。 
口 你 的 网 站 中 只 包含 很 少 的 语义 数据 。 如 果 你 的 网 站 中 只 有 为 数 不 多 的 页 面包 含 语义 数 
据 ，Google 很 可 能 忽略 这 些 页 面 。 
避免 了 犯 这 些 错误 ， 就 有 机 会 让 Google 帮 你 显示 更 丰富 的 信息 。 


3.3.2 ”菜谱 搜索 引擎 


在 搜索 结果 列表 中 显示 更 丰富 的 信息 是 一 个 不 错 的 技巧 , 这 样 可 以 为 网 站 诗 来 更 多 流量 。 即 
f A, PRP REE GA ADAE. QUPENIWISESSRT Bex n] LL BUT A ERES UE? 告诉 你 吧 ， 
Google 的 天 才 工 程 师 们 一 直 在 忙 着 设计 未 来 的 搜索 ， 很 多 地 方 都 考虑 到 了 语义 呢 。 

比如 ， 有 一 个 点 子 非常 棒 ， 那 就 是 利用 语义 信息 实现 更 入 能 的 搜索 过 滤 ， 而 不 是 影响 搜索 结 
果 的 表现 。 假 设 人 们 使 用 RDFa、 微 格式 或 微 数据 标记 了 自己 的 简历 ，Google 就 可 以 提供 一 个 特殊 
的 简历 搜索 功能 ， 专 门 检 索 这 类 数据 ， 涵 盖 所 有 流行 的 求职 网 站 ， 忽 略 其 中 无 关 的 内 容 。 这 种 从 
历 搜索 引擎 也 可 以 提供 高 级 过 滤 选 项 , 比如 让 公司 可 以 按照 认证 或 曾 工作 过 的 公司 来 搜索 候选 人 。 

目前 ，Google 还 没有 发 布 这 样 的 徐 历 搜索 引擎 ， 但 却 发 布 了 一 个 概念 上 极为 相近 的 新 服务 ， 
而 且 实 用 性 还 挺 强 的 ， 那 就 是 一 个 专门 搜索 洲 谱 的 工具 。 

说 到 怎样 用 微 数 据 或 微 格 式 来 标记 沫 谱 数 据 , Tex lH C. AMEME T o 无 非 就 是 把 一 个 采 谱 放 
到 一 个 容 硕 中 ， 相 应 的 格式 遵守 荣 单 数据 格式 (http:/data-vocabulary.org/Recipe ) IIAJ. KZ. 
作者 及 图 片 都 有 各 目的 属性 ， 而 且 还 可 以 提供 一 句 话 的 概述 和 来 目 用 户 的 评论 星 级 。 
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下 面 就 是 一 个 亲 详 的 标记 示例 : 


«div itemscope itemtype-"http://data-vocabulary.org/Recipe"» 
<h1 itemprop-"name"5Elegant Tomato Soup«/h1» 
«img itemprop-"photo" src-"soup.jpg" alt-"A bowl of tomato soup"> 
«p»By «span itemprop-"author"»Michael Chiarello«/span»«/p» 
«p itemprop-"summary"»Roasted tomatoes are the key to developing the rich 
flavor of this tomato soup.«/p» 











然后 ， 可 以 再 添加 一 些 有 关 沫 谱 的 重要 信息 ， 比 如 准备 时 间 、 误 饪 时 间 和 和 沫 量 。 此 外 ,还 可 Bo 
LABHECE— Si, HIT BIS ARI EKA ( 相应 的 信息 有 份量 、 卡 路 里 、 脂 肪 ， 等 等 : )。 


«p»Prep time: «time itemprop-"prepTime" datetime="PT30M">30 min«/time»«/p» 
«p»Cook time: «time itemprop-"cookTime" datetime-"PT1H"»40 min«/time»«/p» 
«p»Yield: «span itemprop-"yield"»4 servings«/span»«/p» 
«div itemprop-"nutrition" itemscope 

itemtype-"http: //data-vocabulary.org/Nutrition"» 

Serving size: «span itemprop-"servingSize"5»1 large bowl«/span» 

Calories per serving: «span itemprop-"calories"»250«/span» 

Fat per serving: «span itemprop-"fat"»3g«/span» 
</div> 


注意 ”其 中 的 prepTime 和 cookTime 属 性 表示 的 是 一 段 时 间 ， 而 不 是 一 个 时 间 点 。 因 此 ， 不 能 使 用 
5 HTMLS 的 <time> 元 素 相 同 的 时 间 格 式 。 正 确 的 格式 是 ISO 格式 ， 详 情 参 见 : 
http://en.wikipedia.org/wikvISO 8601#DUurations 。 





册 然 后 ， 束 该 列 出 染 详 的 各 种 原料 了 。 每 种 原料 午 要 单独 放 在 一 个 舱 套 的 容 肯 中 ,其 中 一 般 
都 要 包含 原料 名 和 数量 


«ul» 

«li itemprop-"ingredient" itemscope 
itemtype-"http://data-vocabulary.org/RecipeIngredient"» 
«span itemprop-"amount"»1«/span» 

«span itemprop-"name"»yellow onion«/span» (diced) 

oA 

<li itemprop-"ingredient" itemscope 
itemtype-"http: //data-vocabulary.org/RecipeIngredient"» 
«span itemprop-"amount"»14-ounce can«/span» 

«span itemprop-"name"»diced tomatoes«/span» 
</li> 


</ul> 





原料 部 分 的 标记 写 起 来 确实 比较 烦琐 一 一 不 过 ， 别 放 径 ， 马 上 就 能 看 到 回报 了 。 
最 后 ， 就 是 一 系列 实际 操作 步骤 的 详细 说 明 ， 这 些 步 又 要 从 属于 一 个 属性 ， 比 如 : 


«div itemprop-"instructions"» 
«ol» 
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«li»Preheat oven to 450 degrees F.«/li» 
«li»Strain the chopped canned tomatoes, reserving the juices.«/li» 
«div» 
ejiis 
要 想 看 一 个 完整 的 亲 谱 标记 示例 ， 请 访问 http://tinyurl.com/RichSnippetsRecipe。 


注意 ”菜单 一 般 都 很 长 ， 也 很 琐碎 ， 因 此 为 它们 加 标记 要 花 比 较 长 的 时 间 ， 还 必须 全 身心 投入 。 
这 种 情况 下 ， 如 果 有 一 个 得 心 应 手 的 软件 工具 ， 显 然 能 大 大 提高 工作 效率 。 想 象 一 下 ， 
使 用 这 个 工具 ， 作 者 只 要 在 精心 布局 的 窗口 中 的 文本 框 中 依次 输入 菜谱 的 细节 即 可 。 然 
后 ， 它 就 能 生成 语义 正确 、 可 以 直接 放 到 网 页 中 的 标记 代码 。 


Google 在 索引 了 这 个 标记 了 和 荣 谱 的 页 面 后 , 用 户 就 可 以 通过 Recipe View ( 荣 谱 视图 ) 搜索 到 
菜谱 。 想 试 试 Recipe View 搜 索 ? 请 访问 http:/www.google.com/landing/recipes/， 然 后 在 搜索 框 里 输入 
采 名 ， 单 击 Search。 之 后 ， 有 意思 的 事情 就 出 现 了 。 因 为 Google 能 理解 每 个 亲 谱 的 结构 ， 从 而 可 以 
忽略 并 不 包含 真正 采 谱 数据 的 网 页 ,而 且 还 能 瀛 加 更 智能 的 过 滤 选 项 ( 见 图 3-9 ) 结果 , 语义 数据 
为 互联 网 用 户 提 供 了 非常 强大 的 信息 挖掘 文 择 ， 也 为 用 户 找到 你 的 网 页 提供 了 更 有 效 的 方式 。 





























— - Google Search [+] | x 3 -9 . 搜 索 名 zn d Google 还 可 以 让 
€) Y E http;//www.google.com/search?q-tomato* soup&tbs- rcp?53A1 -|GC | f E 你 通 过 pt pied 的 菜 pu 中 包 e 的 其 他 la E fs HR 
Web Images Videos Maps News Shopping Gmail more ~ Signin 党 来 对 结果 进行 过 滤 。 比如 of 以 指定 必须 包 
Google | tomato soup « euch] Son 含 或 排除 某 种 原材料 ， 也 可 以 设 定 最 长 京 饪 


About 410,000 results (0.10 seconds) Advanced search 时 [E] 或 最 pu 的 FT 路 里 值 











是 Everything » Homemade Tomato Soup 





Ahk 239 reviews - 50 mins 
Food Network invites you to try this Homemade Tomato 
llli videos Soup recipe from Michael Chiarello. . 
pe Ingredients: tomatoes, olive oil, pepper, celery, carrots, onion, 
89 News garlic ... 
多 TERR www.foodnetwork.com » Recipes » Comfort food - 
opping Cached - Similar 
ELT REN 
= Tomato Soup 
Mare Ahhh 56 reviews - 1 hr 
Vegetable broth hosts tomatoes, onion, garlic, 
Ingredients Yes No celery, carrot and savory herbs, for a soup 
garlic Im m that's perfect for a cold winter's day. 


m3 m allrecipes.com/recipe/tomato-soup/ - 
—— Cached - Similar 
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basil 
crushed red 


pepper . .. Tomato soup 
bay leaves E] 


Oo EEXX] tw 86 reviews 
Tosemary 回回 (| To make the tastiest tomato soup you'll ever 
celery 回回 | experience wait until the tomatoes are at their 
tomatoes | f most ripe and juicy, around September. 

-— p www.bbcgoodfood.com/.. ./tomato-soup - 


carrots Cached - Similar 








Any cook time 
Lado hon 45 min Garden Fresh Tomato Sou 
boss dan 30 mif twt 397 reviews - 35 mins 
Less than 60 ates pæ A simple soup made with fresh tomatoes, that 
3 is sure to become one of your favorites. 
Any calories C D allrecipes.com/.. /garden-fresh-tomato-soup/ - 
Less than 100 cal — 
Less than 300 cal E 
Less than 500 cal Tomato Sou Reci e 
P 1 hr 25 mins 
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TML 表 单 指 的 就 是 从 网 站 访客 那里 收集 信息 的 HTML 控 件 。 比 如 ， 可 以 填写 文本 的 文 
本 框 ， 可 以 选择 的 列表 框 ， 可 以 选中 或 取消 选中 的 复 选 框 。HTML 表 单 的 用 途 非常 之 
多 ， 上 一 星期 的 网 ， 就 可 以 体验 到 它 各 种 各 样 的 用 途 ， 比 如 查询 股票 行情 或 者 注册 电子 邮件 。 
HTML 表 单 与 HTML 语 言 几 乎 是 同时 出 现 的 ,但 到 了 20 世 纪 末 都 没有 丝毫 改进 。 这 期 间 的 几 
次 努力 也 以 失败 告终 。 制 定 Web 标 准 的 人 们 曾 耗费 数 年 时 间 推 出 了 XForms, 作为 HTML 表 单 的 升 
级 版 。 但 XForms 跟 XHTML 2 (参见 1.1.2 节 ) 一 样 单调 乏味 。 虽 然 XForms 确 实 能 解决 一 些 问题 ， 
而 且 也 不 失 方 便 和 优雅 ， 但 它 的 问题 也 很 多 。 比 如 ， 代 码 元 长 ， 要 求 设计 人 员 熟 练 掌握 XML。 
不 过 ,影响 它 推广 的 最 大 障碍 还 是 不 兼容 HTML 表 单 。 换 句 话 说 ,要 使 用 XForms 的 话 ， 开发 人 员 
就 得 心 一 横 ， 眼 一 财 ， 把 未 来 完全 交 给 一 个 新 的 模型 。 这 需要 极 大 的 勇气 ， 同 时 也 是 理想 主义 的 
一 种 表现 。 最终， 由 于 主流 浏览 器 根本 就 没有 实现 XForms 的 打算 (RER, 实际 使 用 率 也 不 高 )， 
Web 开 发 人 员 也 就 从 来 没有 真正 面临 前 述 两 难 的 抉择 。 
HTML5 采 取 了 完全 不 同 的 做 法 : 在 已 有 HTML 表 单 模 型 基础 上 进行 修订 , 在 老 版 本 的 浏览 3 
中 使 用 HTML5 表 单 也 没有 问题 ， 只 不 过 没有 那么 多 增强 而 已 。( 这 一 点 很 重要 ， 因 为 [E10 都 还 没 
有 支持 新 的 表单 功能 。 ) HTML5 表 单 还 涵盖 了 很 多 开发 人 员 已 经 在 使 用 的 功能 。 有 了 HTML5 表 
单 ， 一 切 都 变 得 容易 了 。 开 发 人 员 不 必 再 为 实现 同样 的 功能 而 编写 一 大 堆 JavaScript 代 码 ， 或 者 
求助 于 其 他 公司 的 JavaScript 框 架 了 。 
本 章 就 来 学 习 所 有 HTML5 表 单 的 新 功能 。 我 们 会 介绍 现 有 浏览 器 支持 哪个 功能 ， 不 支持 哪 
个 功能 ,而 为 了 弥补 现 有 的 差异 ， 可 以 使 用 什么 过 渡 方 案 。 此 外 ， 本 章 还 会 介绍 在 普通 网 页 中 级 
入 富 HTML 编辑 需 的 技术 ， 但 严格 来 讲 ， 这 项 技术 不 是 HTML5S 表 单 标 准 中 规定 的 。 


4.4 理解 表单 


当然 ， 可 能 有 的 读者 对 表单 并 不 阳 生 。 不 过 ,假如 你 对 表单 理解 得 没有 那么 深 ,， 本 下 可 以 玫 
你 梳理 一 下 有 关 表 单 的 基本 知识 。 

我 们 通常 所 说 的 Web 表 单 ， 束 是 一 组 文本 杠 、 列 表 、 按 钮 及 其 他 可 以 点 击 的 小 控件 ,通过 这 
些小 控件 可 以 收集 网 站 访客 的 某 些 信息 。 表单 在 互联 网 上 是 随处 可 见 的 , 可 以 通过 表单 注册 电子 
邮件 账户 , 发 表 对 商品 的 评论 或 者 在 网 上 银行 完成 交易 。 谷歌 的 搜索 表单 妨 怕 要 算 足 世界 上 最 简 
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单 的 表单 了 一 一 只 有 一 个 文本 框 〈 图 4-1 )。 


一 一 图 4-1: 谷歌 简练 的 搜索 页 面 中 有 一 个 只 
(E J> [8 velim 3 .| ”包含 基本 元 素 的 表单 ,使 用 这 个 表单 跟 使 
Web images Videos Maps News Shopping Gmail more- Google account Signin +A 用 其 他 任何 表单 没有 区 别 一 一 输入 一 些 
文本 ( 在 这 里 是 要 搜索 的 关键 词 ) ， 然 后 
点 击 按钮 提交 该 文本 





Google 


Google Search I'm Feeling Lucky 


Advertising Programs B 
About Google 








表单 输入 字段 。” 表单 提交 按钮 











所 有 基本 表单 的 工作 方式 部 类 似 ， 即 用 户 填写 信息 然后 竺 击 按钮 。 此 时 ,浏览 可 会 收集 用 户 
输入 的 信息 并 将 其 发 送 给 Web 服 务 胡 。 在 服务 条 上 ， 有 软件 程序 负责 处 理 信 息 ， 并 决定 下 一 步 的 
操作 。 服 务 带 吕 的 这 个 程序 可 能 要 联系 数据 库 ( 可 能 是 读 取 数据 也 可 能 是 号 入 数据 )， 之 后 再 把 
新 页 面 发 送 给 训 贤 从 。 

这 里 提 到 的 (负责 处 理 通 过 表单 提交 的 数据 的 ) 服务 天 站 程序 可 没有 那么 和 价 单 ， 处 理 数据 的 
方式 不 下 儿 百 种 。 有 些 程序 员 愿 意 使 用 纯 手工 脚本 操作 原始 的 表单 数据 , 而 其 他 人 可 能 会 利用 服 
务 大 问 语言 打包 好 的 模块 ,下 接 处 理 封 滩 在 对 象 中 的 表单 数据 。 但 无 论 采 用 什么 方式 ,过程 都 差 
不 多 : 检查 表单 数据 ， 对 数据 进行 条 种 处 理 ， 然 后 再 发 回 一 个 新 网 页 。 


























注意 ”本 书 不 会 讨论 任何 服务 器 端的 编程 工具 。 实 际 上 ,服务 器 端 使 用 什么 工具 都 无 所 谓 ， 因 
为 你 要 使 用 的 表单 元 素 不 会 变 ， 而 这 些 元 素 要 遵守 的 HTMLS 规 则 也 不 会 变 。 


使 用 JavaScript 绕 过 表单 提交 数据 
有 必要 提醒 大 家 一 下 ,并 不 是 只 能 使 用 表单 向 Web 服 务 器 发 送 用 户 输入 的 数据 (虽然 以 前 
是 这 样 )。 如今 ， 熟 练 的 程序 员 都 使 用 XMLHttpRequest 对 象 ( 参见 11.1.1 节 ), 在 JavaScript 代 码 
中 静 悄 悄 地 跟 服 务 器 通信 , 谷歌 就 是 一 个 例子 , 它 采 用 这 种 技术 一 方面 取得 搜索 建议 , 就 是 显 
示 在 下 拉 列 表 中 的 建议 条 目 ; 另 一 方面 会 在 用 户 输 入 搜索 关键 词 的 过 程 中 即时 显示 结果 页 面 。 
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当然 ， 你 得 开启 谷歌 的 即时 搜索 功能 才 行 (www.google.com/instant )。 

像 Google Instant 这 样 通过 JavaScript 完 全 绕 过 表单 提交 数据 的 情况 并 不 少见 。 可 以 把 它 当 
做 一 项 功能 来 提供 给 用 户 ， 但 不 要 把 它 作为 必要 功能 。 原 因 很 简单 ，JavaScript 并 非 无 懈 可 去 
的 (比如 ， 在 网 速 慢 的 情况 下 可 能 会 有 些 奇 怪 的 现象 发 生 )， 而 且 还 有 一 少 部 分 人 的 浏览 器 不 
支持 或 关闭 了 JavaScript。 

最 后 还 要 说 一 名 ,页 面 中 包含 表单 ,不 一 定 非 要 把 数据 提交 到 服务 器 。 相 信 你 见 过 那些 只 
用 于 执行 简单 计算 的 页 面 ( 比如 抵押 贷款 利率 计算 器 )， 这 些 页 面 中 的 表单 不 需要 与 服务 器 通 
信 ， 完 全 依靠 JavaScript 完 成 计算 并 在 页 面 中 显示 结果 。 

从 HTMLS 的 角度 来 看 ， 无 论 是 向 服务 器 提交 表单 ， 还 是 在 本 地 页 面 的 JavaScript 中 直接 使 
用 数据 ， 或 者 通过 XMLHttpRequest 对 象 将 它 传 回 服务 器 ， 真 的 都 无 所 谓 。 无 论 如 何 ， 都 需要 
使 用 标准 的 HTML 表 单 控件 来 构建 表单 。 


4.2 ”传统 表 早 翻新 


学 习 HITMLS 表 单 的 最 佳 方式 ， 莫 过 于 找 一 个 现 有 的 例 了 于 ， 然 后 加 以 改进 。 图 4-2 展 示 了 这 样 
一 个 有 每 改进 的 例子 。 














[O [E cams chapter NZooKeeperForm Onginal tm -ox re 图 4-2: 只 要 你 上 过 网 ， 就 不 难 遇 见 与 图 中 的 “动物 
LE 一 园 党 理 员 申 请 表 ”类似 的 表单 ， 它 负责 从 网 页 访客 那 
Zoo Keeper Application Form 里 收集 基本 的 信息 


Please complete the form. Mandatory fields are marked with a * 














CONTACT DETAILS 
Name * 
Telephone 


Email * 


PERSONAL INFORMATION 


*Age 











Gender Female 





When did you 
first know you 
wanted to be a 
zoo-keeper? 


PICK YOUR FAVORITE ANIMALS 


| Zebra Cat O Anaconda 口 Human 


| Elephant Wildebeest O Pigeon O Crab 


Submit Application 

















pU AR BUbNCOCH TT AED. WRR RA, TEXX USUS ZUR SMEPSIDUZ UL. 
首先 ， 整 个 表单 被 包 痛 在 一 个 <form> 元 系 里 : 
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«form id-"zooKeeperForm" action-"processApplication.cgi"» 
«p»«i»Please complete the form. Mandatory fields are marked with 
a «/i»«em»*«/em»«/p» 





<form> 元 素 用 于 组 织 所 有 表单 部 件 (也 称 为 控件 或 字段 )， 人 负责 告诉 浏览 器 把 数据 提交 到 哪 
E, 方法 是 在 action 属 性 中 提供 一 个 URL。 假如 你 只 想 在 客户 端 使 用 JavaScript 操 作 表 单 ， 那么 只 
要 在 action 属 性 里 指定 一 个 井 号 (#) 即 可 。 








注意 HTML5 新 增 了 一 种 机 制 ， 支 持 把 表单 控件 放 在 它 所 在 的 表单 外 面 。 方法 是 使 用 新 的 form 
属性 引用 表单 的 ID 值 ( 如 form="zooForm" )。 不 过 ， 如 果 浏 览 器 没有 实现 这 种 机 制 ， 提 交 
表单 时 就 会 忽略 这 些 数据 。 换 匈 话 说 ， 这 个 小 的 改进 还 不 适合 在 真正 的 网 页 中 应 用 。 








像 前 面 “ 动 物 园 管理 员 申 请 表 ” 这 样 精 心 设 计 的 表单 ， 都 会 使 用 <fieldset> 元 素 划分 几 个 逻 
辑 块 。 每 个 块 都 有 一 个 放 在 <legend> 元 素 中 的 标题 。 以 下 是 Contact Details 部 分 的 <fieldset> 元 素 
(其 结 采 如 图 4-3 所 示 ): 


«fieldset» 
«legend»Contact Details«/legend» 

«label for-"name"»Name «em»*«/em»«/label» 
«input id-"name"»«br» 
«label for-"telephone"»Telephone«/label» 
«input id-"telephone"»«br» 
«label for-"email"»Email «em»*«/em»«/label» 
«input id-"email"»«br» 

«/fieldset» 


«legend» «fieldset» 图 4-3. 这 个 <fieldset> 
| 元 素 收集 三 方面 信息 : 名 
CONTACT DETAILS 字 、 电 话 和 电子 邮件 。 
条 信息 都 有 一 个 文字 说 
HH ( 包含 在 <label> 元 素 
里 ) 和 一 个 负责 收集 数据 
Email * 的 控件 ( 使 用 <input>、 


«textarea» 或 «select» 


Name * 


Telephone 


«label» «input» 元 素 ) 











在 任何 表单 里 , 通用 的 <input> 元 素 都 要 承担 大 部 分 工作 。 通过 <intput> 可 以 收集 文本 , 创建 
复 选 框 、 单 选 按钮 和 其 他 按钮 。 除 了 “input> 元 系 , 可 以 使 用 ctextarea> 元 素 让 用 户 输入 多 行文 本 ， 
而 使 用 <select> 元 系 则 可 以 创建 选择 列表 。 想 回顾 这 些 表单 元 素 的 读者 ， 可 以 参考 表 4-1。 
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控 — # 
单行 文本 杠 


多 行文 本 框 
复 选 杠 
单 选 按钮 


按钮 


列表 


HTML 元 素 
«input type="text"> 
«input type="password"> 


«textarea»...«/textarea» 
«input type-"checkbox"» 


«input type-"radio"» 


«input type-"submit"» 
«input type-"image"» 
«input type-"reset"» 
«input type-"button"» 


«select»...«/select» 


表 4-1 


表单 控件 

说 HB 

显示 文本 框 ， 用 户 可 以 在 其 中 填写 内 容 。 如 果 是 密码 类 型 的 文 
本 框 ， 剖 览 器 就 不 会 显示 用 户 输入 的 文本 ， 而 是 用 星 号 (*) 或 
Ag (C) 来 代 赫 每 个 字符 

显示 大 文本 框 ， 可 以 输入 多 行文 本 

显示 复 选 框 ， 可 以 作为 开关 ， 选 中 或 取消 选中 

显示 单 选 按钮 (一 个 空心 圆 ， 可 以 选中 或 取消 选中 ) 。 一 般 单 
选 按 钮 都 是 成 组 出 现 的 ,每 一 组 单 选 按 钮 都 有 相同 的 name 属 性 ， 
用 户 只 能 选择 其 中 一 个 

显示 标准 的 可 以 单 击 的 按钮 ， 其 中 类 型 为 submit 的 提交 按钮 用 
于 收集 表单 数据 , 并 将 它们 发 送 给 指定 目标 ; 类 型 为 jmage 的 图 
像 按钮 与 提交 按钮 作用 相同 ， 但 可 以 显示 成 一 幅 可 以 单 击 的 图 
像 而 非 按钮 ; 类 型 为 reset 的 重 置 按钮 ， 用 于 清除 用 户 的 选择 和 
己 经 输入 的 文本 信息 ， 而 类 型 为 button 的 按钮 本 身 没 有 任何 功 
能 ， 但 可 以 通过 JavaScript 给 它 赋予 功能 

显示 一 个 选择 列表 ， 用 户 可 以 从 中 选择 一 或 多 个 列表 项 。 每 个 
列表 项 用 <option> 元 素 添加 








以 下 是 “动物 园 管理 员 申请 表 ” 的 剩余 标记 ， 包 含 了 一 些 新 元 素 〈 如 <select> 列 表 、 复 选 框 
和 提交 表单 的 按钮 ): 





«fieldset» 


«legend»Personal Information«/legend» 


«label for-"age"»«em»*«/em»Age«/label» 


«input id-"age"»«br» 
«label for-"gender"»Gender«/label» 


«select id- 


"gender"? 


«option value-"female"»Female«/option» 


«option value-"male"»Male«/option» 


«/select»«br» 

«label for-"comments"»When did you first know you wanted to be a 
z0oo-keeper?«/label» 

«textarea id-"comments"»«/textarea» 


«/fieldset» 


«fieldset» 


«legend»Pick Your Favorite Animals«/legend» 
«label for-"zebra"»«input id-"zebra" type-"checkbox"» Zebra«/label» 
«label for-"cat'»«input id-"cat" type-"checkbox"» Cat«/label» 
<label for-"anaconda"»«input id-"anaconda" type= checkbox" > Anaconda 


«/label» 


«label for-"human"»«input id-"human" type-"checkbox"» Human«/label» 
«label for-"elephant"»«input id-"elephant" type-"checkbox"» Elephant 


«/label» 


«label for-"wildebeest"»«input id-"wildebeest" type= checkbox > 
Wildebeest«/label» 
«label for-"pigeon"»«input id-"pigeon" type-"checkbox"» Pigeon«/label» 
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«label for-"crab"»«input id-"crab" type-"checkbox"» Crab«/label» 
«/fieldset» 
<p><input type="submit" value-"Submit Application"»«/p» 
«/form» 
访问 本 书 在 线 示 例 网 站 : www.prosetech.com/html5， 可 以 看 到 完整 的 示例 及 人 简单 的 样式 表 。 
其 中 ，ZookeperForm _Original.html 是 传统 的 没有 经 过 改进 的 表单 ， 而 ZookeperForm Revised.html 
包含 的 则 是 使 用 HTML5 表 单元 系 之 后 的 新 表单 。 











注意 HTML 表单 有 一 个 限制 ， 就 是 不 能 修改 浏览 器 呈现 控件 的 方式 。 例 如 ， 你 想 把 标准 的 傻 
里 傻 气 的 灰色 复 选 框 蔡 换 成 一 个 又 大 又 醒目 的 黑白 框 ,， 再 配 上 粗大 的 对 色 图 标 。 对 不 起 ， 
HTML 不 支持 。( 解决 方案 是 使 用 JavaScript 来 创建 一 个 与 复 选 框 具有 相同 行为 的 常规 元 
素 ， 换 名 话说 ， 就 是 在 用 户 单 击 该 元 素 时 来 回 切换 这 个 元 素 的 外 观 。) 

HTMLS 仍 然 没 有 打破 这 个 不 能 自 定 义 的 限制 ， 但 新 增 了 一 些 本 章 将 会 介绍 的 新 控件 。 对 
于 需要 自由 定制 控件 样式 和 希望 统一 页 面 外 观 的 人 ， 表 单 不 合适 。 


看 完了 这 个 大正 的 表 蛙 示例 之 后 ， 接 下 来 我 们 就 要 动手 用 HTML5 来 改进 它 了 。 以 下 几 市 先 
从 小 的 占 位 符 文 本 和 日 动 获 得 焦点 的 字段 开始 。 











4.2.1 通过 占 位 符 文本 添加 提示 


表单 一 开始 通 并 都 是 空 的 , 但 一 堆 空 空 如 也 的 文本 框 看 起 来 会 让 人 心里 发 刁 , 特别 是 在 文本 
框 归属 关系 不 清 的 时 候 尤 其 如 此 。 所 以 , 我 们 经 党 也 可 以 看 到 一 些 文本 框 里 预先 融 有 一 段 提 示 性 
文本 。 这 种 占 位 符 文 本 也 叫做 水 印 ， 因 为 这 些 文本 的 颜色 一 般 是 浅 灰 色 的 , 用 以 区 别 用 户 真 正 输 
入 的 文本 。 图 4-4 展 示 了 占 位 符 文 本 。 

要 创建 占 位 符 ， 使 用 placeholder 属 性 : 


«label for-"name"»Name «em»*«/em»«/label» 

«input id-"name" placeholder-"Jane Smith"»«br» 

«label for-"telephone"»Telephone«/label» 

«input id-"telephone" placeholder-"(xxx) xxx-xxxx'"»«br» 


不 文 持 paceholder 属 性 的 浏览 融会 忽略 它 ; 正 的 可 能 性 最 大 .好 在 占 位 符 文 本 并 非 不 可 或 缺 ， 
没有 它 也 不 会 影 啊 到 表单 的 基本 功能 。 假 如 你 真 想 要 占 位 符 文 本 , 实际 上 也 有 很 多 JavaScritp 伞 丁 
可 以 让 正文 持 ， 人 参见 http:Wtinyurl.com/polyfills。 

目前 , 还 没有 标准 的 统一 方式 来 改变 占 位 符 文本 的 样式 ( 例如 把 它们 变 成 斜体 或 换 成 其 他 颜 
色 )。 但 浏览 硕 开 发 商 最 终 会 提供 一 个 应 用 CSS 样 陈 的 挂 钧 一 一 事实 上 ， 你 在 看 本 书 的 时 候 ， 可 
能 他 们 正在 商讨 具体 的 实现 方案 呢 。 如 有 果 你 现在 就 有 需求 ， 可 以 使 用 特定 于 浏览 器 的 伪 类 〈 即 
-webkit-input-placeholder 和 -moz-placeholder )， 不 然 ， 就 只 能 听 之 任 之 了 。( 附录 A 会 解释 什 
么 叫 伪 类 。 ) 
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didi 图 4-4: 上 : 如 果 文 本 框 中 没 
Name * 有 内 容 ， 就 显示 占 位 符 文 
本 ， 如 Name 和 Telephone 字 上段 
所 示 ; 下 : 在 用 户 单 击 文本 
框 后 ( 文本 框 获得 焦点 ) ， 
占 位 符 文本 消失 ， 当 


Telephone 


Email * 


换 到 下 一 个 文本 框 时 ， 如 果 
文本 框 仍 然 是 空 的 ， 则 占 位 
符 文 本 又 会 出 现 


CONTACT DETAILS 


Name * [ 1 jJ 


lelephone 


Email * 








话说 回来 ， 使 用 被 文 持 得 更 好 的 focus 伪 类 ， 可 以 在 文本 框 获 得 焦点 时 改变 其 样式 。 例 如 ， 
可 以 让 文本 框 的 背景 变 成 深 色 ， 以 便 更 加 显眼 : 


input:focus ( 
background: #eaeaea; 


j 








用 好 占 位 符 

并 不 是 每 个 文本 框 都 需要 占 位 符 ， 应 该 利用 占 位 符 来 消除 歧义 。 例如,，“ 姓 ”这 个 文本 框 
不 用 多 加 解释 ， 而 “名 字 ”( 如 图 4-4 中 的 Name ) 就 不 是 那么 明确 了 。 占 位 符 文 本 告诉 用 户 . 
名 和 姓 之 间 要 留 一 个 空格 。 

在 某 些 情况 下 ， 占 位 符 则 是 一 个 示例 值 ， 即 用 户 可 能 真 地 会 输入 的 值 。 比 如 ，Google 的 菜 
谱 搜 索 (http://www.google.com/landing/recipes ) 框 中 使 用 chicken pasta 作 为 占 位 符 ， 说 明 应 该 
输入 菜 名 中 包含 的 几 个 词 ， 而 不 是 做 这 道 菜 所 需要 的 原材料 。 

另外 ， 占 位 符 可 以 用 来 表示 值 的 格式 。 图 4-4 中 的 电话 号 码 占 位 符 (XXX) XXX-XXXX 表 示 电 话 
号 码 应 该 由 三 位 数字 的 区 号 开头 , 后 跟 三 位 ， 再 跟 四 位 数字 。 这 种 占 位 符 不 一 定 表 示 不 能 接受 
其 他 格式 的 输入 ， 但 却 能 够 给 用 户 一 个 格式 方面 的 建议 。 

应 该 避免 用 占 位 符 去 做 两 件 事 儿 。 一 是 不 要 用 它 代替 字段 描述 或 说 明 。 比 如 ， 对 于 一 个 收 
集 信用 卡 安全 码 的 文本 框 ,，“ 您 的 卡 背 面 的 三 位 数字 ”并 不 适合 以 占 位 符 形式 出 现 。 可 以 考虑 
把 它 放 在 输入 框 下 面 ， 或 者 把 这 句 话 作 为 title 属 性 的 值 ， 当 用 户 和 据 标 悬 停 到 字段 上 时 ， 弹 出 
一 个 窗口 来 告诉 用 户 应 该 输入 什么 

«label for="promoCode">Promotion Code«/label» 

«input id-"promoCode" placeholder-"ORBoo1" 


title-"Your promotion code is three letters 
followed by three numbers"» 
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二 是 不 要 为 了 表示 占 位 符 不 是 真正 的 内 容 , 就 选择 特殊 字符 作为 占 位 符 。 比 如 ， 有 些 网 站 
中 使 用 [Jonh Smith] 而 不 是 John Simth， 想 用 方 括号 强调 这 个 占 位 符 只 是 一 个 例子 。 这 种 做 法 很 
容易 让 人 迷惑 。 


4.2.2 焦点 : 挑选 正确 的 起 点 


加 载 完 表单 之 后 ， 用 户 要 做 的 第 一 件 事 儿 就 是 项 写 表 单 。 然 而 ， 除 非 用 户 按 下 Tab 切 换 到 第 
一 个 控件 ， 或 者 在 其 中 单 击 一 下 女 标 ， 从 而 让 第 一 个 控件 获得 焦点 ， 否 则 就 不 能 输入 。 

在 相应 的 <input> 元 系 上 通过 JavaScript 调 用 focus () 方 法 ， 可 以 帮 用 户 完 成 焦点 切换 。 但 这 样 
就 得 编写 代码 ， 而 且 有 时 还 会 出 现 问 题 。 比 如 ， 在 调用 focus() 方 法 之 前 ， 用 户 已 经 单 击 了 其 他 
控件 并 开始 输入 的 情况 也 可 能 发 生 。 这 时 便 性 地 把 焦点 切换 到 第 一 个 控件 显得 很 粗鲁 。 但 如 采 浏 
览 策 目 己 能 控制 焦点 ， 它 惑 可 以 在 用 户 操 作 之 前 ， 先 把 焦点 给 予 正 确 的 控件 。 

POL AZEHTMLS 3 Jlllautofocus/& TERI XE, (HH üE256—^ | «input»zX «textarea»70 28 NIMAA 
属性 : 


«label for="name">Name «em»*«/em»«/label» 
«input id-"name" placeholder-"Jane Smith" autofocus»«br» 


Ljplaceholder]BTE—fFE, KR TIE, Efl vaübodHrautofocusm TE. PE, XJ FIELA 
办 法 的 。 可 以 使 用 Modernizr ( 51.6.3 15 ) 检测 浏览 需 是 否 文 持 autofocus， 然 后 昌 己 编写 脚本 
实现 。 也 可 以 使 用 别人 已 经 开发 好 的 JavaScript 程 序 ( http://tinyurl.com/polyfills )。 不 过 ， 很 少 有 
人 为 了 这 点 功能 如 此 兴 师 动 众 , 除非 你 也 想 让 IE 支 持 其 他 表单 功能 , 比如 下 面 要 讨论 的 数据 验证 。 












































4.3 验证 : 阻止 错误 


表单 中 的 字段 是 为 了 从 网 页 访客 那里 收集 信息 的 。 但 是 , JG TRE ZAR TURRIM), Sn] 
能 得 不 到 想 要 的 结果 。 性 子 急躁 的 或 者 糊 里 糊涂 的 访客 ， 有 可 能 跳 过 重要 的 部 分 ， 只 填写 少量 信 
A, 或 者 只 是 不 小 心 按 错 了 键 。 最 后 怎么 样 ? 他 单 击 了 “提交 ”按钮 ， 你 的 网 站 收集 到 了 一 堆 乱 
七 八 糖 的 数据 。 

很 多 网 页 都 需要 验证 ， 就 是 在 发 生 错误 时 捕捉 到 它 〈 而 更 好 的 方案 是 防止 出 错 )。 很 多 年 来 ， 
开发 人 员 都 要 目 己 写 JavaScript 验 证 脚本 ， 有 时 候 也 会 用 到 专业 的 JavaScript 库 。 应 该 说 ， 这 些 验 
证 方法 效 采 都 非常 好 。 然 而 ， 鉴 于 验证 是 那么 常用 ( 可 能 要 对 每 个 人 都 做 错误 检查 )， 验 证 解决 
的 问题 是 那么 集中 ( 例如 ， 发 现 无 效 的 电子 邮件 或 日 期 );， 以 及 编写 验证 脚本 那么 讨厌 ( 没有 人 
真心 喜欢 为 每 个 表单 都 编写 一 裔 同样 的 代码 ， 更 不 要 说 测试 这 些 脚 本 了 )， 因 此 这 个 问题 一 定 还 
有 改进 的 空间 。 

HTML5S 规 范 的 制定 者 决定 让 浏览 痊 帮 愤 解 决 这 些小 问题 ， 以 后 承 不 用 让 开发 人 员 操 心 了 。 
为 此 , 他 们 设计 了 一 套 客户 端 验 证 方法 (参见 后 面 的 “在 两 个 地 方 验证 ”), 让 我 们 可 以 在 <input> 
字段 里 梭 入 常用 的 错误 检查 规则 。 而 且 , 般 入 验证 规则 的 方法 很 简单 , 只 要 指定 正确 的 属性 就 行 。 
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4.3.1 HTMLS5 验证 的 原理 


HTML5 表 单 验 证 的 基本 原理 就 是 你 来 告诉 浏览 带 要 验证 哪个 字段 ,但 具体 验证 的 细 市 ， 你 
不 用 管 。 这 就 像 是 提拔 你 当 了 和 领导， 只 不 过 没 给 你 涨 工资 。 

例如 ， 你 决定 某 个 字段 不 能 留 空 ， 意 味 着 用 户 必 须 填 上 点 什么 。 在 HTML5 中 ， 可 以 通过 
required 属 性 贯彻 你 这 个 指示 : 


«label for-"name"»Name «em»*«/em»«/label» 
«input id-"name" placeholder-"Jane Smith" autofocus required»«br» 

















在 两 个 地 方 验证 
多 少年 来 , 效 业 的 开发 人 员 已 经 找到 很 多 解决 验证 问题 的 方法 ,今天 ,大 家 都 有 了 明确 的 
共识 。 那 就 是 ， 要 想 让 表单 万 无 一 失 ， 就 需要 在 两 个 地 方 验证 。 
口 客户 端 验证 。 客 户 端 验证 就 是 在 浏览 器 中 检查 错误 ， 没 有 错误 再 提交 。 客 户 端 验 证 的 目 
的 是 减少 填 表 人 的 麻烦 。 因 为 填 表 人 要 知道 哪儿 填 得 不 对 , 不 必 填 完 30 多 个 文本 框 再 提 
交 ， 而 是 随 填 随 提示 了 。 也 就 是 说 ， 可 以 在 出 错 的 字段 劣 边 显 示 一 条 类 似 帮 助 的 消息 ， 
提醒 填 表 人 在 提交 表单 之 前 纠正 错误 。 
口 服务 器 端 验证 。 这 是 在 用 户 将 数据 提交 给 服务 器 之 后 进行 的 验证 。 此 时 ,服务 器 端 代 码 
要 负责 检查 所 有 细节 , 确保 在 进行 下 一 步 操 作 之 前 所 有 数据 都 是 有 效 的 。 无论 浏 览 器 做 
不 做 验证 , 服务 器 端 验 证 都 是 必 不 可 少 的 。 这 是 预防 别有用心 的 人 故意 自 改 数据 的 唯一 
途径 。 如 果 服 务 器 端 验 证 检测 到 问题 ， 就 向 浏览 器 发 回 一 个 包含 错误 消息 的 页 面 。 
简 言 之 ， 客 户 端 验证 ( 包括 HTML5 表 单 验 证 ) 是 为 访客 提供 方便 的 ， 而 服务 器 端 验证 才 
是 确保 数据 正确 性 的 。 最 关键 的 是 , 要 知道 这 两 个 地 方 的 验证 缺 一 不 可 一 一 除非 你 的 表单 极其 
简单 ， 而 且 不 担心 数据 有 错误 或 者 有 错误 问题 也 不 大 。 


一 开始 并 没有 什么 可 见 的 提示 告诉 用 户 这 是 一 个 必 填 子 段 。 为 此， 我 们 应 该 给 出 一 些 提 示 ， 
比如 为 文本 框 应 用 不 同 的 边框 颜色 或 者 在 字段 劳 边 放 一 个 星 号 ( 就 像 前 面 “动物 园 管理 员 申 请 表 ” 
一 样 )。 

当 填 表 人 单 击 提 交 按 钮 时 ， 验 证 才 发 挥 作用 。 如 东 训 览 锅 文 持 HIML5 表 和 单 ， 当 它 发 现 有 一 
个 必 填 字段 为 空 时 ， 它 会 拦截 提交 ， 并 在 无 效 字 段 劳 边 显示 一 个 提示 ， 如 图 4-5 所 未 。 

下 面 几 方 会 介绍 , 不 同 的 属性 表示 不 同 的 验证 规则 。 可 以 给 一 个 输入 框 应 用 多 种 规则 ， 而 一 
种 规则 可 以 应 用 给 多 个 <input> 元 素 (或 者 <textarea> 元 素 )。 提 交 表 单 之 前 ， 所 有 验证 条 件 都 必 
须 满 足 。 

而 这 就 引发 了 一 个 有 意思 的 问题 : 如 朱 表 单数 据 违反 了 多 个 规则 会 出 现 什 么 绪 末 一 一 比如 有 
多 个 必 填 字段 都 空 着 ? 

同样 ， 在 用 户 填 与 完 表 单 并 单 击 提交 之 前 ， 什 么 都 不 会 发 生 。 只 有 单 击 “提交 ”按钮 ， 才 会 
触发 浏览 硕 去 从 上 到 下 地 验证 表单 数据 。 只 要 发 现 一 个 无 效 的 值 ， 它 承 会 傈 下 来 ,不 再 继续 验证 
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其 他 字段 。 同 时 ， 它 会 取消 提交 操作 ， 并 在 无 效 值 的 劳 边 显 示 一 条 错误 消息 。( 此 外 ， 如 果 有 问 
题 的 文本 框 不 在 当前 视 口 中 ， 则 浏览 融会 深 动 到 它 正 好 位 于 页 面 顶部 。) 用 户 纠 正 了 输入 错误 并 
再 次 单 击 “提交 ”按钮 后 ， 训 览 带 会 在 下 一 个 无 效 的 值 处 停 下 来 ， 再 次 给 出 错误 提示 。 





CONTACT DETAILS 


图 4-5; 这 里 是 相同 的 必 填 字段 在 Firefox( 上 )、 
cdi = 一 Chrome ( 中 ) 和 Opera ( T ) 中 的 样式 。 浏 览 
Please fill out this field 器 采用 什么 方式 提醒 用 户 , 在 规范 里 没有 限 
aal 制 ,但 这 三 个 浏览 器 都 使 用 了 类 似 提示 条 的 弹 
出 框 。 可惜 的 是 , 我 们 不 能 修改 这 个 弹出 框 的 
样式 , 也 不 能 修改 验证 消息 一 一 至 少 现在 不 能 


CoNTACT DETAILS 


Name * 


Telephone Please fill out this field. 


Email * 


CONTACT DETAILS 


Name * 


Titre c— 


Email * 





注意 ”只 有 用 户 单 击 “ 提 交 ” 按 钮 ， 浏 览 器 才 会 执行 验证 。 这 样 可 保证 验证 的 效率 ， 同 时 也 比 
较 适 度 ， 因 而 所 有 人 都 可 以 使 用 。 
有 些 人 喜欢 在 用 户 输入 错误 并 ( 通过 按 Tab 或 单 击 网 页 中 其 他 地 方 ) 离开 相应 字段 时 马上 
给 出 提示 。 对 于 比较 长 的 表单 ， 特 别 是 用 户 可 能 会 在 多 个 不 同 字段 中 犯 相同 错误 的 情况 
下 ， 这 种 方法 很 有 必要 。 让 憾 的 是 ，HTML5 不 支持 指定 验证 的 时 机 ,但 将 来 倒是 有 这 个 
可 能 。 目 前 ， 如 果 想 要 即时 显示 验证 消息 ， 最 好 还 是 自己 编写 JavaScript 或 选择 一 个 不 错 
的 JavaScript 库 。 


4.3.2 ”天 闭 验 证 


有 些 情况 下 ,可 能 需要 禁用 验证 功能 。 比 如 ,在 测试 服务 右 问 代码 能 否 适 当 人 处 理 无 效 数据 的 
时 候 , 就 需要 关闭 客户 端 验证 。 要 禁用 整个 表单 的 验证 功能 , 可 以 在 <form> 元 素 中 添加 novalidate 
属性 : 

«form id-"zooKeeperForm" action-"processApplication.cgi" novalidate» 

为 外 ， 也 可 以 考虑 增加 为 外 一 个 提交 按钮 来 绕 过 验证 。 这 个 办 法 有 时 候 对 网 页 是 很 有 用 的 。 
比如 , 可 以 给 出 一 个 正式 的 提交 按钮 , 强制 对 表单 进行 严格 验证 , 而 同时 再 给 出 为 一 个 提交 按钮 ， 
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实现 其 他 功能 ( 如 保存 未 完成 的 数据 ， 以 便 将 来 使 用 )。 要 添加 这 个 额外 的 按钮 ， 可 以 在 表示 相 
应 按钮 的 <input> 元 系 中 添加 formnovalidate 必 性 : 


«input type="submit" value-"Save for Later" formnovalidate» 


好 了 ,现在 已 经 介绍 了 怎么 通过 验证 来 捕获 缺失 的 信息 。 接 下 来 , 我们 讨论 如 何 查 找 不 同类 
型 数据 中 的 错误 。 








注意 ”什么 ， 你 想 验 证 数值 ? 唉 ， 没 有 验证 规则 强制 文本 中 必须 包含 数字 不 过 ， 倒 是 有 一 
个 新 的 number 数 据 类 型 ，4.4.5 节 会 讨论 到 。 可 惜 的 是 ， 浏 览 器 对 这 个 新 数据 类 型 的 支持 
还 不 好 。 


4.3.3 ”验证 样式 挂 钧 


虽然 我 们 无 法 修改 验证 消息 的 样式 ， 但 却 可 以 根据 输入 字段 的 验证 状态 〈state ) 来 改变 它 
Ue 。 比 如, ALIS ELIGE n] ELM BRE ERE, HEP dS EU SIRO, CASER 
背景 颜色 就 全 立刻 改变 











为 此 ， 只 要 使 用 几 个 新 的 伪 类 即 可 (关于 伪 类 ， 请 参考 附录 A )， 可 以 使 用 的 伪 类 如 下 。 
O required ( ÙH ) 和 optional ( 选 十 ): REXETE 是 否 使 用 了 required 属 性 来 应 用 不 同 的 
FEIK o 





O valid (有效 ) 和 invalid (7030): 根据 控件 中 是 否 包 含 错误 来 应 用 不 同 的 样式 。 注 意 ， 
除非 访客 提交 表单 ， 否 则 大 多 数 浏 览 套 并 不 会 发 现 哪些 人 有 效 ， 哪 些 值 无 效 ; 换 句 话说 ， 
访客 不 会 实时 看 到 表示 输入 无 效 的 样式 变化 。 

口 -Tange( 在 范围 内 ) 和 out-of-range (超出 范围 ): 根据 控件 的 min 和 max 属 性 判断 输入 值 

否 超出 范围 ， 从 而 为 控件 应 用 样式 〈 人 参见 4.4.4 )。 
举 个 例子， 假如 你 想 为 一 个 必 填 的 <input> 元 系 应 用 浅黄 色 背 景 , 就 可 以 为 required 伪 类 定义 
一 条 样式 规则 : 


input:required 1 
background-color: lightyellow; 























或 者 ， 如 打 你 只 想 突出 显示 那些 必 填 且 当 前 填 和 人 了 无 效 值 的 字段 ， 那 么 可 以 像 下 面 这 样 把 
required 和 invalid 伪 类 组 合 起 来 : 


input:required:invalid ( 
background-color: lightyellow; 
} 


有 了 这 条 规则 ， 空 着 的 字段 就 会 日 动 高 冠 ， 因 为 这 些 字 段 违 反 了 必 填 字段 的 规则 。 

可 以 灵活 运用 上 述 技 巧 ， nab 或 者 为 表示 无 效 的 值 使 用 一 个 市 
错误 图 标的 仿 移 背景 。 当 然 , 还 有 一 个 忠告 : 可 以 使 用 这 些 伪 类 增强 页 面体 验 , 但 要 保证 页 面 没 
有 它们 也 照样 很 好 一 一 旧版 本 的 浏览 佛 不 支持 
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4.3.4 使 用 正则 表达 式 


HTMLS 文 持 的 最 强大 (也 最 复杂 ) 的 验证 方法 是 正则 表达 式 。 既 然 JavaScript 文 持 正 则 表达 
式 ， 那 么 为 HTML 表 单 添加 这 项 功能 也 在 情理 之 中 。 

所 谓 正 则 表达 式 ， 就 是 一 种 用 正则 表达 式 语言 编写 的 文本 模式 。 正 则 表达 式 的 用 途 是 匹配 文 
本 一 一 比如 , 可 以 用 正则 表达 式 验 证 邮政 编码 中 包含 正确 的 字母 和 位 数 , 或 者 验证 电子 邮件 地 址 
中 包含 一 个 @ 符 号 和 一 个 至 少 两 个 字母 的 域名 后 缀 。 还 是 看 一 个 正则 表达 式 吧 : 

[A-Z2](3)-[0-9](3] 

开头 的 方 括号 定义 了 人 允许 的 字符 范围 。 换 句 话 说，[A-Z] 就 是 允许 从 A 到 Z 的 任意 字母 。 随 后 
的 花 括号 表示 人 允许 几 个 字符 ，{3} 当然 表 示人 允许 3 个 大 写字 母 。 接 下 来 的 短 横 线 没有 特殊 的 含义 ， 
就 表示 三 个 大 写字 母后 面 必须 有 一 个 短 横 线 。 最 后 ，[0-9] 表 示人 允许 一 个 0 到 9 的 数字 ， 而 {3} 要 求 
必须 是 3 个 数字 。 

正则 表达 式 经 常用 于 搜索 ( 在 长 文档 中 查找 匹配 模式 的 文本 ) 和 验证 ( 验证 某 个 值 匹配 模式 )。 
HTML5 表 单 使 用 正则 表达 式 来 验证 。 


























—— 


注意 ”正则 表达 式 极 客 请 听 好 一 一 不 必 使 用 ^ 和 $ 字 符 表 示 要 匹配 字段 值 的 开头 和 结尾 。HTML5S 
会 自动 确保 这 一 点 。 实 际 上 ， 这 就 是 说 正则 表达 式 匹 配 的 是 字段 中 完整 的 值 ， 验 证 的 也 
是 整个 值 的 有 效 ' 性 。 


好 ， 下 面 这 些 值 都 是 有 效 的 ， 因 为 它们 与 上 面 的 模式 匹配 : 
QRB-001 
TTT-952 
LAA-000 


但 下 面 这 些 值 无 效 : 
qrb-001 


TTT-0952 
LA5-000 


Tí HAB TE UI A CAR n] SÉ ECOL DIT re B Ze, qf EL. WS ERRAKI 
正 因为 如 此 ,大 多 数 开 发 人 员 痢 愿意 搜索 一 个 现成 的 正则 表达 式 来 验证 相关 的 数据 类 型 ,要 不 然 ， 
也 会 找 别人 帮忙。 


提示 要 想 轻松 学 习 正 则 表达 式 语言 的 基本 规则 ， 能 够 编写 简单 的 表达 式 ， 可 以 参考 以 下 简明 
教程 : http://www.w3schools.com/js/js_obj regexp.asp 或 http://tinyurl.com/jsregex。 要 想 找 一 
些 现成 的 正则 表达 式 ， 用 在 自己 的 表单 里 ， 可 以 访问 http://regexlib.com/。 要 想 成 为 一 名 
正则 表达 式 高 手 , 可 以 看 《精通 正则 表达 式 (第 3 版 )》( Jeffrey Friedlzt, O'Reilly% XJ; 
余 最 译 ， 电 子 工业 出 版 社 中 文 版 )。 
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找到 或 写 好 一 个 正则 表达 式 之 后 , 可 以 通过 pattern 属 性 将 其 应 用 到 <input> 或 <textarea> 元 素 : 


«label for="promoCode">Promotion Code«/label» 

«input id-"promoCode" placeholder-"QRB-001" title= 
"Your promotion code is three uppercase letters, a dash, then three numbers" 
pattern-"[A-Z](3)- [0-9] (3)? 


图 4-6 展 示 了 输入 的 值 违反 正则 表达 式 规则 后 的 结果 。 


提示 浏览 器 不 会 验证 空 值 。 在 这 个 例子 中 ,不 输入 折扣 号 (Promotion Code ) 可 以 通过 验证 。 


图 4-6: Ha RASNI rS ( 如 这 里 的 Chrome ) 不 
i ix, 还 能 从 title 属 性 中 提取 文本 
并 显示 出 来 ， 以 告知 填 表 的 人 


Please match the 
requested format. 

Your promotion code is three 
letters, a dash, then three 
numbers 





注意 ”正则 表达 式 似 乎 能 完美 地 匹配 电子 邮件 地 址 (确实 也 是 )。 尽 管 如 此 ， 建 议 大 家 也 不 要 用 
正则 表达 式 ， 因 为 HTML5 专 门 定义 了 一 个 用 于 输入 电子 邮件 地 址 的 输入 类 型 ， 当 然 已 经 
内 置 了 正确 的 正则 表达 式 ( 具体 请 参见 4.4.1 节 )。 


4.3.5” 目 定义 验证 


HTML5 规 范 也 规定 了 一 组 JavaScript 属 性 ， 通 过 它们 可 以 知道 字段 是 否 有 效 (或 强制 浏览 8 
验证 这 些 凶 段 )。 其 中 最 常用 的 是 setCustomValidity() 方 法 ， 基 于 这 个 方法 可 以 针对 特定 字段 编 
————— 

PIBDEREUBEABHESXUSWub. Hoc. 要 检查 相应 字段 是 否 有 错 ， 为 此 需要 处 理 onInput 事 件 ， 
没有 什么 要 解释 的 : 

«label for-"comments"»When did you first know you wanted to be a 


zookeeper?«/label» 
«textarea id-"comments" oninput-"validateComments(this)" »«/textarea» 


XE, onInputzE fF fil —^ 44 7JvalidateComments () I] PC, io PRECII ZR E] C. 23 
的 ， 主 要 是 检测 <input> 元 系 的 值 ， 然 后 调用 setCustomvalidity() 方 法 。 
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v 
` 





如 果 当 前 值 有 问题 ,那么 在 调用 setCustomvalidity() 方 法 时 就 需要 提供 一 条 错误 消息 。 和 否则 ， 


HRIH E 
如 采 当 前 值 没 有 问题 , 调用 setCustomValidity() 方 法 时 只 要 传人 空 字符 串 即 可 ; 这 样 会 清除 以 前 
设置 过 的 日 定义 错误 消 乱 。 
要 强制 评论 (comment) 框 中 至 少 有 20 个 字符 ， 可 以 这 样 写 validateComments() 哨 数 : 


function validateComments(input) { 
if (input.value.length < 20) { 
input.setCustomValidity("You need to comment in more detail."); 


else 4 
// 没 有 错误 。 清 除 任何 错误 消息 
input.setCustomValidity(""); 
j 
Í 
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PERSONAL INFORMATION 图 4-7， 如 果 在 调用 setCustom- 
Age* 6666666 Validity() 方 法 时 提供 了 和 错误 
消息 ， 浏 览 器 会 将 该 消息 当做 
自己 内 置 的 消息 。 提交 表单 时 ， 
就 会 看 到 弹出 的 警告 框 中 包含 


Coder Female 


When did vou I had a dream. 
first know you 


wanted to be a E XE pd Hy 错误 消 息 


zoo-keeper?* 


You need to comment in more detail. 


MER. SIFET Uum EGET BIaHBmEE, 使 用 正则 表达 式 可 能 更 简单 明了 。 而 尽管 正则 表达 式 
很 适合 验证 某 些 数据 类 型 ， 目 定义 验证 逻辑 却 适 用 于 任何 情况 ， 无 论 是 复杂 的 数学 计算 还 是 与 
Web 服 务 表 通信 。 














注意 ”网 页 访客 可 以 看 到 你 放 在 JavaScript 中 的 一 切 ， 这 里 没有 什么 加 密 算法 。 就 拿 前 面 示例 中 
的 折扣 码 来 说 ， 其 位 数 是 12 位 。 但 你 肯定 不 愿意 在 自 定 义 验 证 逻辑 中 透露 这 个 信息 ， 否 
则 无 疑 会 为 那些 想 要 伪造 折扣 码 的 人 提供 便利 。 对 于 这 种 情况 ， 还 是 把 验证 逻辑 放 在 服 
务 器 端 比 较 好 。 


4.3.6 浏览 器 对 验证 的 支持 
不 同 浏览 器 对 验证 功能 的 支持 也 不 一 样 。 换 名 话说， 有 的 浏览 器 支持 某 些 验证 功能 ， 而 另 一 
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它们 的 最 低 版 本 。 


表 4-2 ”支持 验证 功能 的 浏览 器 


IE Firefox Chrome Safari Opera Safari iOS Android 
最 低 版 本 10 4 10 5 ( 仅 限 10 E — 
Windows) 





* 在 本 书写 作 时 ，IE10 还 未 发 布 正 式 版 。 


由 于 HTML5 验 证 不 能 取代 服务 右 问 验证， 因此 可 以 仅 将 其 看 做 一 种 增强 ;在 这 种 情况 下 ， 
浏览 善文 持 的 一 致 不 一 致 也 束 无 所 谓 了 。 此 时 ， 对 于 不 文 持 这 些 验证 的 浏览 希 〈 如 IE9 )， 用 户 提 
交 的 数据 会 百 接 发 送 给 服务 硕 ， 然 后 服务 硕 发 现 其 中 的 问题 ， 再 返回 市 错误 消息 的 相同 页 面 。 

另 一 种 可 能 是 ,你 的 网 站 包含 一 些 复 杂 的 表单 ， 有 些 到底 该 怎么 填 也 不 太 明 确 ， 而 你 也 不 愿 
意 有 眼睁睁 看 着 大 量 下 用户 流失 。 此 时 ， 有 两 个 选择 : 一 是 你 目 己 编写 验证 功能 ， 二 是 使 用 现成 的 
JavaScript 库 ， 借 助 外 脑 。 到 底 怎么 四， 取决 于 验证 任务 的 广度 和 复杂 性 。 

假如 你 的 表单 只 需 少 量 简单 的 验证 ， 你 可 以 自己 写 验 证 代码 。 利 用 Modernizr ( 参见 1.6.3 市 ) 
可 以 检测 浏览 器 对 各 种 HIML5S 表 单 验证 功能 的 文 持 情况 。 例 如 ， 使 用 Modernizr.input.pattern 
属性 可 以 检测 出 浏览 郑 是 否 文 持 pattern 必 性: 

if (!Modernizr.input.pattern) { 


























// 浏 览 器 不 支持 正则 表达 式 验证 ， 可 以 在 JavaScript 中 使 用 正则 表达 式 


注意 ”这 里 的 pattern 属 性 只 是 Modernizr.input 对 名 中 的 一 个 属性 。 其 中 ,用 于 检测 浏览 器 对 表 
单 验证 支持 情况 的 属性 还 有 : placeholder、autofocus、required、max、min 和 step。 


没 错 ， 这 个 例子 没有 告诉 你 什么 时 候 执行 检测 ， 也 没有 告诉 你 该 如 何 反 馈 。 假 如 你 想 模 仿 
HTML5S 验 证 机 制 ,可 以 在 用 户 提交 表单 的 时 候 执行 检测 。 为 此 , 需要 为 表单 的 onSubmit 事 件 定义 
处 理 函 数 ， 根 据 情况 返回 true《〈 表 示 验 证 通过 ， 可 以 提交 表单 ) 或 false〈 表示 验证 未 通过 ， 浏 
览 融 应 该 取消 提交 操作 ): 

«form id-"zooKeeperForm" action-"processApplication.cgi" 

onsubmit-"return validateForm()"» 


以 下 是 一 个 人 简单 的 示例 ， 演 示 了 针对 一 个 必 填 字段 的 目 定 义 验证 代码 : 


function validateForm() { 
if (!Modernizr.input.required) { 














// 不 支持 required 属 性 ， 因 此 必须 自己 编写 代码 检测 


// 首 先 ， 取 得 包含 所 有 元 素 的 数组 
var inputElements = document.getElementById("zooKeeperForm").elements; 
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// 接 着 ， 遍 历数 组 ， 检 测 每 个 元 素 
for(var i = 0; i < inputElements.length; i++) { 


// 检 测 当 前 元 素 是 否 必 填 
if (inputElements[i].hasAttribute("required")) ( 
// 如 果 是 必须 填写 的 ， 则 检测 其 值 是 否 为 空 
// 如 果 为 空 ， 则 表单 验证 失败 ， 返 回 false 
if (inputElements[i].value -- "") return false; 
} 
} 


// 如 果 到 了 这 儿 ， 则 一 切 顺利 
// 浏 览 器 可 以 提交 表单 
return true; 


提示 “以 上 代码 运用 了 基本 的 JavaScript 技 术 ， 包 括 查 找 元 素 、 循 环 和 条 件 逻 辑 。 有 关 JavaScript 
的 基本 知识 ， 请 参阅 附录 B。 





如 末 你 的 表单 很 复杂 ， 而 你 又 想 省 点 事 儿 《省 下 的 时 间 可 以 学 习 未 来 的 技术 )， 则 大 可 选择 
一 个 现成 的 JavaScript 库 。 从 技术 角度 讲 ， 无 论 是 上 自己 写 ， 还 是 使 用 JavaScript 库 都 没有 什么 不 一 
样 。 都 是 先 检 测 浏 览 锅 对 验证 功能 的 文 持 情况 , 然后 再 在 必要 时 手工 验证 。 但 区 别 在 于 , JavaScript 
库 已 经 为 你 准备 好 了 所 有 代码 。 

访问 http://tinyurl.com/polyfills， 可 以 看 到 长 长 的 页 面 ， 里 面 列 出 了 大 量 JavaScript 库 。 其 中 有 
些 库 就 是 用 于 表单 验证 的 ， 比 如 webforms2， 网 址 为 https://github.com/westonruter/webforms2( 要 
下 载 一 份 ， 需 要 找到 不 那么 明显 的 Download 链 接 ). 

这 个 webforms2 库 实现 了 我 们 到 现在 为 止 介绍 的 所 有 属性 。 要 使 用 这 个 库 ， 需 要 先 把 所 有 文 
件 下 载 到 你 网 站 所 在 的 文件 夹 中 (或 者 ， 更 多 时 候 应 该 放 在 其 中 的 一 个 子 文件 夹 中 )， 然 后 在 网 
页 中 引用 这 个 库 即 可 : 


<head> 
<title>...</title> 
<script src="webforms2.js"></script> 


























<head> 

实际 上 ，webforms2 库 中 还 集成 了 男 一 个 JavaScript“ 补 J ”: html$SWidgets， 这 个 “补丁 ”可 
以 添加 接 下 来 我 们 要 介绍 的 表单 功能 ， 比 如 请 动 条 、 数 据 选 择 顺 和 颜色 选择 器 。 要 了 解 关 于 这 个 
多 合 一 JavaScript 库 的 详细 信息 ， 请 参考 http:/www.useragentman.comytests/htm1$SWidgets。 这 两 个 
库 提 供 了 全 面 的 Web 表 单 文 持 ， 但 代码 中 也 不 可 避免 地 会 存在 缺陷 和 小 小 的 bug。 至 于 这 两 个 令 
人 钦佩 的 库 能 否 得 到 适当 维护 且 不 断 改进 ， 时 间 会 给 我 们 答 宁 。 
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几 个 特殊 的 输入 属性 
HTML5 还 定义 了 另外 几 个 不 用 于 验证 的 属性 , 而 是 用 于 在 编辑 表单 时 控制 浏览 器 的 行为 。 
这 些 属性 并 不 是 所 有 浏览 器 都 支持 。 因 此 ， 这 几 个 属性 目前 还 只 能 用 于 试验 。 

口 Spellcheck. 有 些 浏 览 器 可 以 帮 用 户 检查 输入 的 拼写 是 否 正 确 。 不 过 有 一 个 明显 的 问题 ， 
即 并 非 所 有 输入 都 是 单词 ,而 这 个 功能 只 允许 用 户 “ 胡 乱 ” 输 入 几 个 字母 ,将 spellcheck 
设置 为 false， 表 示 不 建议 浏览 器 对 字段 进行 拼写 检查 ; 设置 为 trrue， 表 示 建 议 拼 写 检 
查 。( 浏览 器 默认 的 拼写 检查 行为 也 不 一 样 ， 如 果 你 不 设置 spellcheck 属 性 ， 那 么 这 个 
问题 就 会 出 现 。) 

O Autocomplete。 有 些 浏览 器 为 了 节省 你 的 时 间 ， 会 在 你 向 字段 中 输入 信息 时 提供 最 近 
输入 的 值 供 你 选择 。 自 动 完成 功能 并 不 是 所 有 时 候 都 适用 的 ， 正 如 HTML5 规 范 中 指 
出 的 , 有 些 信 息 属 于 敏感 信息 ( 比如, 核 攻 击 的 编码 ), 而 有 些 信息 只 是 临时 性 的 (如 
一 次 性 的 银行 登录 验证 码 )。 在 这 种 情况 下 ， 应 该 把 autocomplete 属 性 设置 为 off， 告 
诉 浏览 器 不 要 提供 自动 完成 的 建议 。 而 在 确实 需要 的 情况 下 ， 也 可 以 把 autocomplete 
设置 为 on。 

口 AutocorTect 和 autocapitalize。 这 两 个 属性 可 以 用 来 在 移动 设备 〈 即 了 Pad 和 iPhone 中 的 
Safari) 上 控制 自动 纠 错 和 自动 大 小 写 功 能 。 

口 Multiple。 很 久 以 来 ，Web 开 发 人 员 一 直通 过 为 <select> 元 素 添 加 multiple 属 性 ， 达 到 
让 用 户 能 选择 多 个 列表 项 的 目的 。 但 现在 ， 可 以 为 茶 些 类 型 的 <input> 元 素 添 加 这 个 属 
性 ， 包 括 用 于 上 传 文件 的 们 ]e 类 型 和 email 类 型 (参见 4.4.1 节 )。 在 支持 的 浏览 器 中 ， 用 
户 可 以 选择 多 个 文件 一 块 上 传 ， 或 者 可 以 在 一 个 输入 框 中 贴 上 多 个 邮件 地 址 。 


4.4 新 的 输入 控件 


HTML 表 单 有 一 个 奇怪 的 做 法 ，, 即 用 一 个 元 素 ( 含 合 糊 糊 地 叫 <input> ) 创建 多 个 控件 : 复 选 
框 、 文 本 框 ， 以 及 按钮 。 此 时 ，type 属 性 就 成 为 地 地 道道 的 总 开关 ， 它 的 值 决定 了 <input> 元 素 
SIE AE TE ATE. 

如 采 浏 览 硕 遇 到 了 不 认识 的 <input> 元 系 类 型 ( type 属 性 值 )， 它 就 将 其 作为 一 个 普通 的 文本 
框 来 处 理 。 换 名 话说 ， 以 下 3 个 元 系 在 浏 览 融 中 痢 会 生成 一 个 文本 框 : 

«input type-"text"» 


«input type-"super-strange-wonky-input-type"» 
«input» 


HTMLS/AIHI T A AARAA SATA ABI 3X, «input» TRAI T THAT, CHAR Ws A 
认识 这 些 类 型 ， 仍 然 会 将 其 当做 普通 的 文本 框 来 处 理 。 比 如 ， 要 创建 一 个 用 于 输入 电子 邮件 地 址 
的 文本 框 ， 可 以 使 用 新 的 email 类 型 : 
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«label for-"email'»Email «em»*«/em»«/label» 
«input id-"email" type-"email"»«br» 


在 不 支持 email 类 型 的 浏览 絮 ( 如 IE9 ) 中 打开 这 个 网 页 ， 会 看 到 一 个 普通 文本 框 ， 这 是 完全 
可 以 接受 的 。 但 文 持 HTMLS 表 单 的 浏览 需 会 更 聪明 一 点 ， 它 们 会 像 下 面 这 样 做 。 

OQ 提供 便于 编辑 的 辅助 。 例 如 ， 智 能 一 些 的 浏览 器 可 以 从 你 的 地 址 短 中 取得 电子 邮件 地 址 ， 
帮 你 填 到 电子 邮件 字段 中 。 

O 限制 可 能 出 现 的 错误 。 例 如 ， 在 数值 文本 框 中 输入 的 字母 会 被 浏览 器 忽略 ， 或 者 无 效 的 
日 期 会 被 拒绝 〈 当然 ， 也 可 能 会 要 求 你 从 一 个 迷你 小 日 历 中 选择 日 期 ， 这 样 既 方便 又 可 
4E )。 

O 执行 验证 。 在 单 击 提交 按钮 时 ， 浏 览 器 可 以 执行 更 加 完善 的 检查 。 比 如 ， 智 能 一 些 的 浏 
览 需 会 发 现 电子 邮件 字段 中 明显 存在 错误 的 邮件 地 址 ， 从 而 拒绝 继续 提交 。 

HTMLS 规 范 没 有 就 上 述 第 一 点 作出 明确 规定 。 浏 览 硕 开发 商 可 以 视 情 况 自 行 决定 如 何 显 示 

和 编辑 不 同 的 数据 ， 而 不 同 的 浏览 姨 也 可 以 有 自己 的 特色 功能 。 比 如 , 移动 设备 上 的 浏览 姨 可 以 
定制 虚拟 键盘 ， 显 示 或 隐藏 不 需要 的 键 (参见 图 4-8 )。 




















一 全 mc 8 图 -8， 在 移动 浏览 器 中 ， 要 填写 表单 可 
C NN me — —5(À 7 | 没有 全 键盘 可 以 使 用 。 图 中 的 iPod 通过 
mE ' — | 定制 虚拟 键盘 为 用 户 提 供 了 方便 ， 根 所 
į 一 一 一 一 一 一 要 输入 的 数据 类 型 电话 号 码 和 电子 
邮件 ， 会 分 别 显示 数字 键盘 ( 左 ) 和 带 
有 @ 按 键 及 小 空格 键 的 字母 键盘 ( 右 ) 




















Alsjpjrjelnljkl 
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Aib. SOGRIERIYBIETRBIIRUOHUSSGMTSUAHJZUBE. WE, SCBRHTMLSZEFSRIDU Và di TE A2 
现 表单 中 包含 违反 数据 规则 的 数据 时 , 要 阻止 表单 提交 。 所 以 , 如 末 浏 览 带 不 能 做 到 预防 错误 ( 即 
上 述 第 二 点 ) 那 它 必须 在 用 户 提交 表单 时 验证 数据 (上述 第 三 点 )。 

然而 ,目前 并 非 所 有 浏览 带 都 达到 了 这 些 要 求 。 有 的 文 持 新 控件 类 型 , 也 提供 了 一 些 编辑 辅 
Bj, 但 缺少 验证 功能 。 而 很 多 只 文 持 其 中 部 分 新 控件 ， 且 不 同 浏 览 硕 文 持 的 犯 于 又 不 一 样 。 移 动 
浏览 瘟 的 问题 最 多 ,虽然 它 们 提供 编辑 辅助 功能 ， 但 却 不 会 对 数据 进行 验证 。 

表 4-3 列 出 了 新 的 控件 类 型 以 及 完全 文 持 它们 的 浏览 如 一 一 完全 文 持 是 指 在 有 数据 违反 规则 
时 ， 浏 览 瘟 会 阻止 表单 提交 。 
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表 4-3 ” 文 持 新 控件 的 浏览 器 


控件 类 型 IE Firefox Chrome Safari Opera Safari iOS* Android 
email — 4 10 5 ( 仅 限 Windows) 10.6 — — 
url — 4 10 5 ( 仅 限 Windows) 10.6 — — 
search n/a n/a n/a n/a n/a n/a n/a 
Tel' n/a n/a n/a n/a n/a n/a n/a 
number = 一 一 10 5 ([XBli Windows) 一 一 = 
range — — 6 5 11 — = 
datetime — — 10 — 11 — — 
date 

month 

week, time 

color — — — — 11 一 一 





* HTML5 规 范 没有 要 求 验 证 这 种 类 型 的 数据 。 
** 虽然 iOS 上 的 浏览 器 不 提供 验证 ， 但 其 定制 的 虚拟 键盘 ( 参见 图 4-8 ) 能 提供 极 大 的 便利 ， 因 此 还 是 有 必要 使 用 
特定 类 型 的 控件 。 








提示 如果 你 使 用 Modernizr, 可 以 检测 Modernizr.inputtypes 对 象 的 属性 来 确定 浏览 器 支持 的 控 
My 


件 类 型 。 比 如 ， 如 果 Modetnizr.inputtypes.Tange 返 回 trfue， 则 说 明 浏 览 器 支持 fange 类 型 
的 控件 。 


4.4.1 电子 邮件 地 址 


电子 邮件 地 址 使 用 email 类 型 。 一 般 来 说 ， 有 效 的 电子 邮件 地 址 是 一 个 字符 串 ( 当然 ， 有 些 
字符 是 不 允许 出 现 的 ) 这 个 字符 串 中 必须 包含 @ 伯 写 和 一 个 点 写 , 而 且 两 者 之 间 人 至 少 要 间 阳 一 个 
子 伯 ,点 写 后 面 至 少 也 要 有 两 个 字符 。 以 上 差不多 就 是 一 个 有 效 电 子 邮 件 地 址 的 验证 规则 了 。 可 
AE. 要 为 验证 电子 邮件 地 址 编写 代码 或 者 正则 表达 式 ， 束 没有 这 么 简单 了 。 这 件 看 似 人 简单 的 任务 
难 倒 过 很 多 羡 意 的 开发 人 员 。 因 此 ， 最 好 还 是 找 一 个 支持 email 控 件 的 浏览 带 ， 让 它 目 动 带 我 们 
检测 得 了 (参见 图 4-9 )。 























CONTACT DETAILS 4-9. Firefox 拒 绝 接 受 伪 造 电 子 
邮件 地 址 中 的 空格 


Name * 


Telephone 


EG rakesh s(2emailspammers.com 


Please enter an email address. 
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电子 邮件 控件 文 持 multiple 属 性 ,添加 了 这 个 属性 后 就 可 以 在 同一 个 字段 里 输入 多 个 电子 邮 
件 地 址 。 不 过 ， 多 个 电子 邮件 地 址 之 间 上 只 有 喜 号 分 隔 ， 看 起 来 仍然 像 一 个 字符 让 。 





注意 ”再 提醒 一 次 ， 空 值 可 以 通过 验证 。 如 果 你 想 强 制 用 户 必 须 输 入 有 效 的 电子 邮件 地 址 ， 就 
要 在 email 控 件 中 指定 required 属 性 ( 参见 4.3.1 节 )。 


4.4.2 网 址 


网 址 使 用 url 类 型 。 说 到 网 址 是 由 什么 组 成 的 ， 可 能 会 引发 激烈 的 讨论 。 但 大 多 数 浏 览 可 部 
会 对 验证 网 址 采用 粗略 的 算法 。 首 先 要 有 一 个 URL 前 级 ( 可 以 是 合法 的 ， 如 http://; 也 可 以 是 编 
造 的 ， 如 bonk:// )， 然 后 可 以 是 空格 和 大 多 数 特 殊 字 符 ( 冒号 除外 )。 

有 些 浏览 硕 也 会 在 网 址 控件 中 给 出 URL 建 议 , 这 些 建议 项 一 般 是 从 浏览 希 最 近 的 历史 记录 中 
提取 的 。 








4.4.3 ”搜索 框 


搜索 框 使 用 search 类 型 。 搜 索 框 中 通常 要 输入 关键 词 ， 用 于 执行 某 种 搜索 。 可 能 是 搜索 整个 
互联 网 〈 比 如 使 用 Google， 如 图 4-1 所 示 )， 也 可 能 是 搜索 一 个 网 员 或 者 对 目 己 的 某 些 信息 执行 定 
制 搜 索 。 无 论 如 何 ， 搜 索 框 的 样子 与 行为 部 与 常规 的 文本 框 没 有 太 大 区 别 。 

在 Safari 等 浏览 硕 中 , 搜索 框 的 样式 可 能 会 和 销 有 不 同 两 端 都 是 圆 形 。 而 在 Safari 和 Chrome 
的 搜索 框 中 输入 关键 词 时 ， 一 个 X 图 标 就 会 立刻 出 现在 搜索 框 的 右 侧 ， 单 击 就 可 以 清除 搜索 框 。 
除了 这 些 细微 的 差别 之 外 ， 搜 索 框 与 文本 框 无 异 。 但 搜索 框 的 人 是 有 其 特定 语义 的 。 换 名 话说， 
使 用 搜索 框 可 以 让 浏览 器 及 辅助 (残障 人 士 ) 上 网 的 软件 知道 它 是 干什么 用 的 。 也 许 将 来 会 有 一 
天 ， 这 些 工 具 能 够 利用 搜索 框 把 访客 引导 到 正确 的 位 置 ， 或 者 为 用 户 提供 一 些 便 利 功能 。 






































4.4.4 电话 号 码 


电话 号 码 使 用 tel 类 型 。 电 话 号 码 有 很 多 种 模式 ， 有 的 只 包含 数字 ， 有 的 还 会 包含 空格 、 短 
横 线 、 加 号 和 圆 括号 。 正 是 因为 存在 这 么 多 差异 ，HIML5 规 范 没 有 要 求 浏览 天 验证 电话 号 码 。 
不 过 ， 谁 都 知 直 电话 号 码 字 段 至 少 不 能 接受 字母 〈 当然 ，tel 控 件 确实 不 接受 字母 )。 

上 日前， 使 用 tel 类 型 控件 的 唯一 用 途 是 在 移动 浏览 如 中 定制 虚拟 键盘 ， 键 盘 中 只 包含 数字 ， 
没有 字母 。 











4.4.5 ”数值 


HTML5 定 义 了 两 种 数值 类 型 的 控件 。 其 中 ，number 类 型 用 于 常规 数值 。 
使 用 number 类 型 的 控件 有 明显 的 好 处 。 常 规 文本 框 什么 值 都 可 以 接受 数值、 字母 、 空 格 、 
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标点 符号 ， 以 及 一 些 专 门 的 卡通 的 字符 。 为 此 , 检测 输入 的 信 是 不 是 数值 以 及 是 不 是 在 有 某 个 范围 
内 就 成 了 非常 重要 的 任务 。 现 在 有 了 number 类 型 的 控件 ， 浏览 器 就 可 以 自动 忽略 非 数 值 字符 。 看 


«label for-"age"»Age«em»*«/em»«/label» 
«input id-"age" type-"number"»«br» 


当然 ,数值 也 有 很 多 种 ,也 并 非 任 何 数据 形式 都 可 以 接受 任意 数值 。 上 面 标记 中 所 示 的 年 龄 
(age) 可 以 接受 43 000、-6 之 类 的 值 。 为 了 增加 限制 ， 需 要 配合 使 用 min 和 max 属 性 。 比 如 ， 下 面 
的 例子 就 把 可 接受 的 数值 限制 在 了 0 到 120 之 间 : 


«input id-"age" type-"number" min-"O" max-"120"»«br» 


一 般 来 说 ，number 控 件 只 接受 整数 , 不 接受 30.5 这 样 的 小 数 。( 实际 上 ,有 些 浏览 器 都 不 允许 
输入 小 数 点 。) 不 过 ， 通 过 设置 step 属 性 可 以 改变 这 一 点 ; step 属 性 表示 可 以 接受 的 数值 之 间 的 
间隔 。 例 如 ， 将 最 小 值 (min ) KENO, KERE (step) 设置 为 0.1， 意 味 着 可 以 输入 0、0.1、 
0.2、0.3…… 然 而 ， 输 入 0.15 后 提交 表单 就 会 收 到 错误 消 奶 。 上 默认 的 间隔 值 为 1。 


«label for="weight">Weight (in pounds)«/label» 
«input id-"weight" type-"number" minz"50" max-"1000" step="0.1" 
value-"160"»«br» 


设置 step 属 性 也 会 影响 到 数值 框 的 微调 按钮 ， 如 图 4-10 所 示 。 











图 4-10: 很 多 浏览 需 都 会 在 数值 框 中 添加 微调 


eight ! eio 
Weight (in ^ 按钮 。 每 单 击 一 次 向 上 箭头 , 数值 都 会 增加 step 


pounda 属性 指定 的 值 ( 除非 已 经 达到 允许 的 最 大 值 ) 。 


类 似 地 ， 每 单 击 一 次 向 下 箭头 ， 数 值 都 会 减少 
step 属 性 指定 的 值 





4.4.06 滑动 条 


HTML5 的 为 一 个 数值 类 型 的 控件 是 range。 与 number 控 件 类 似 ， 它 也 可 以 表示 整数 或 者 小 数 
值 。 同 样 ，range 控 件 也 文 持 与 number 欣 件 相 同 的 属性 (min 和 max )， 用 于 设置 允许 的 范围 。 下 面 
是 全 修仙 了 于: 


«label for-"weight"»Weight (in pounds)«/label» 
«input id= weight" type-"range" min="50" max-"1000" value-"160"»«br» 


两 者 的 区 别 是 range 控 件 用 请 动 条 的 形式 表示 信息 。 智 能 浏览 锅 对 于 range 控 件 ， 会 显示 一 个 
如 图 4-11 所 示 的 滑动 条 ， 而 不 是 文本 框 。 

要 设置 range 控 件 的 值 ， 只 要 把 请 块 拖 动 到 合适 位 置 即 可 ， 也 就 是 把 清 块 放 在 滑动 条 上 最 大 
值 和 最 小 值 之 间 的 某 个 地 方 。 文 持 range 控 件 的 浏览 如 不 会 告诉 你 最 终 设 定 了 多 大 的 值 。 如 末 你 
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想 显示 这 个 值 ， 可 以 使 用 JavaScript 啊 应 滑动 条 的 变化 事件 〈 即 处 理 onChange 事 件 )， 然 后 在 劳 边 
把 值 显示 出 来 。 当 然 ， 你 得 事先 检测 一 下 训 览 融 是 不 是 文 持 fange 控 件 〈 使 用 Modernizr 等 工具 )。 
如 果 浏 览 右 不 文 持 range 控 件 ， 就 没有 必要 多 此 一 举 了 ， 因 为 结果 只 能 是 在 文本 框 中 输入 值 。 





图 4-11: 这 个 range 控 件 与 我 们 熟悉 的 首 量 调 市 
絮 很 像 ， 它 非 闸 适合 在 最 小 值 和 最 大 值 已 知 、 


范围 适中 且 输 入 的 特定 值 并 不 重要 ( 但 该 值 接 
近 最 小 值 还 是 最 大 值 重 要 ) 的 情况 下 使 用 





4.4.7 日 期 和 时 间 


HTMLS 定 义 了 几 个 与 日 期 有 关 的 新 控件 。 文 持 日 期 控件 的 浏览 需 会 提供 一 个 方便 的 下 拉 式 
日 历 ， 供 用 户 选 择 。 这 样 ， 不 仅 可 以 避免 对 日 期 格式 的 困惑 ， 也 可 以 避 倪 意外 (或 有 意 ) 输入 一 
个 不 存在 的 日 期 。 智 能 的 浏览 融 还 能 提供 更 多 便利 ， 比 如 与 个 人 日 历 集成 。 

目前 来 看 ， 虽 然 日 期 控件 很 有 用 ， 但 文 持 浏 览 硕 对 它 的 文 持 还 不 好 。Opera 是 唯一 一 个 提供 
下 拉 式 日 历 的 浏览 磊 ( 如 图 4-12 所 示 ) Chrome 的 文 持 最 简单 ， 只 提供 一 个 说 微调 按钮 的 文本 框 
( 类似 number 类 型 )， 但 不 接受 错误 的 日 期 格式 。 

















m ena 图 4-12.: date 和 time 控 件 的 
[I5] Dates and Times 


£ Pb" been ə ft E Local | localhost/C: S * BA 9- ||) $$ (m Local | localhost/C: - 文本 框 ( 左 ) 有 些 不 一 样 。 
但 真正 方便 的 地 方 在 于 ， 
datetime-local: 2012-12-14 ~ |12:00 外 datetime-local: 2012-12-14 ~ 12:002 Operat fit 了 下 拉 式 日 历 ， 
datetime: 2011-12-24 ~ 12:00 自 UTC 1 i 上 用 j= 可 以 xk 择 E 当 = 
date: 2011-06-25 v s > 期 而 不 必 担 心 格 式 ( 4 ) 


Mon Tue Wed Thu 

















| 1 
13:22 8) 


¿0 c3 3U 

5 天 F Gg 
12 13 14 15 
19 20 21 22 
2011-W25 ~ Vei: 26 27 28 29 


2011-06 ~ 





























@ View (100%) O Sr s-e- | @ View (100%) 





提示 “假如 你 想 使 用 新 的 日 期 控件 ， 最 好 还 是 在 不 支持 的 浏览 器 中 使 用 JavaScript 库 ， 例 如 前 面 
介绍 的 html5Widgets ( http://www.useragentman.com/tests/html5 Widgets/ ) 4635, 在 不 支持 
这 些 新 上 日 期 控件 的 浏览 器 中 ， 用 户 很 容易 输入 格式 错误 的 日 期 ， 而 验证 这 些 值 和 提供 适 
当 的 说 明 也 是 很 麻烦 的 事 儿 。( 这 就 是 为 什么 早 就 有 了 自 定 义 JavaScript 日 期 控件 ,而 且 它 
们 在 互联 网 上 随处 可 见 的 原因 。) 
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表 4-4 中 列 出 了 6 种 新 的 日 期 时 间 型 控件 。 
表 4-4 ”日 期 时 间 类 型 的 控件 


控件 类 型 说 明 示 H 
date 格式 为 YYYY-MM-DD 的 日 期 2012-01-25 表 示 2012 年 1 月 25 晶 
time 格式 为 HH:mmss.ss， 用 24 小 时 制 表 示 的 时 间 ， 秒 的 部 分 可 选 ”14:35 或 14:35:50.2 表 示 下 午 
2:35 (50.2 秒 ) 
datetimelocal 格式 为 YYYY-MM-DDTHH:mm:ss， 包 含 日 期 和 时 间 ， 中 间 以 ”20712-01-15714:35 表 示 2012 年 1 
大 写 T 分 隔 月 15 日 下 午 2:35 
datetime 格式 为 YYYY-MM-DDTHH:mm:iss-HH:mm， 包 含 日 期 和 时 | 则 ， 2072-07-75774:35-05:00 表 示 美 
还 有 一 个 时 区 偏 移 量 ， 与 3.1.1 市 中 的 <time> 元 素 格 式 相同 国 纽约 ( 西 五 区 ) 时 间 2012 年 1 
月 15 日 下 午 2:35 
month 格式 为 YYYY-MM， 表 示 年 月 2012-01 表 示 2012 年 1 月 
week 格式 为 YYYY-Www， 表 示 年 和 周 ， 根 据 年 份 不 同 ， 一 年 可 能 ”20712-W02 表 示 2012 年 第 二 周 
有 52 周 或 53 周 


HR o 支持 日 期 类 型 的 浏览 器 也 支持 min 和 和 max 属性。 换 句 话说， 可 以 设置 最 小 和 最 大 日 期 ， 但 
日 期 格式 必须 正确 。 比 如 ， 要 限定 某 日 期 字段 中 必须 填写 2012 年 的 日 期 ， 可 以 这 样 写 : 
«input type= date min= 2012-01-01 max= 2012-12-31 >。 


4.4.8 颜色 


颜色 使 用 color 类 型 。 虽 然 用 处 不 大 ， 但 这 个 新 控件 很 有 意思 ， 可 以 让 用 户 从 下 拉 式 色 盘 中 
选取 颜色 ， 这 个 色 盘 就 像 在 果 面 绘图 程序 中 看 到 的 一 样 。 目 前 ，Opera 是 唯一 提供 下 拉 色 盘 的 浏 
览 硕 。 在 其 他 浏览 希 中 ， 用 户 必 须 手 工 输入 十 六 进 制 的 颜色 编码 〈 当然 ， 你 也 可 以 考虑 使 用 
html5Widgets 库 )。 











4.5 新 元 素 


迄今 为 止 ， 我 们 介绍 了 HTML5 对 表单 的 扩展 ， 介绍 了 新 的 验证 功能 ， 也 介绍 了 通过 添加 新 
的 控件 让 表单 更 加 智能 ,这 些 新 功能 都 是 很 实用 的 ,也 得 到 了 广泛 支持 ,但 是 ,这 些 并 不 是 HTMLS5 
表单 的 全 部 。 

HTML5 也 新 增 了 一 些 全 新 的 元 杂 ， 用 于 弥补 屿 漏 和 增加 功能 。 有 了 这 些 新 元 系 ， 就 可 以 在 
网 页 中 添加 下 拉 建 议 项 、 进 度 条 、 工 具 栏 等 。 这 些 新 元 素 的 问题 在 于 , 旧版 本 的 浏览 磊 肯 定 不 支 
FEI, m4 THTMLSAUS&AS Ere dedil xe c. OU a LE H Ux ERIS AI, RER 
介绍 那些 已 经 得 到 支持 的 功能 。 不 少 读者 好 奇 能 用 这 些 元 素 干 什么 , 但 是 却 不 能 现在 就 把 它们 派 
上 上 用场， 除非 你 对 对 付 浏览 各 怪 阁 和 不 兼容 性 上 瘾 。 
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4.5.1 使 用 <datalist> 显 示 输 入 建议 


新 的 <datalist> 元 素 可 以 让 你 在 普通 文本 框 中 添加 一 个 下 拉 建 议 列表 。 这 样 ， 填 表 的 人 既 可 
以 直接 从 列表 中 选择 输入 ， 也 可 以 目 由 输入 《参见 图 4-13 )。 





— ES) 图 4-13: 输入 的 同时 ， 浏 览 器 会 显示 出 
| Zookeeper tomm 匹配 的 建议 项 。 例 如 , 输入 字母 “ca”， 
€) | file///C:/HTMLS/Chapter 04/Datalist.html J = 浏览 器 就 会 显示 名 字 中 包含 这 两 个 字 
F ( 不 一 定 在 开始 位 置 ) 的 动物 








Zoo Keeper Application Form 


Please complete the form. Mandatory fields are marked with a * 





WHAT'S YOUR FAVORITE ANIMAL? 


[d — 0 


Alpaca 
Cat 
Canbou 
Caterpillar 


<datalist> 必 须 配 合 一 个 标准 的 文本 框 使 用 。 假 设 我 们 有 以 下 <input> 元 素 : 


<legend>What's Your Favorite Animal?«/legend» 
«input id-"favoriteAnimal"» 


要 为 这 个 文本 框 添 加 建议 项 列表 ， 必 须 先 创建 一 个 <datalist>。 从 技术 角度 讲 ， 可 以 在 任何 

地 方 定义 这 个 列表 ， 因 为 <datalist> 不 会 显示 出 来 ， 而 只 会 为 使 用 它 的 文本 框 提供 数据 。 话 虽 这 

么 说 ， 还 是 把 这 个 <datalist> 放 在 使 用 它 的 xinput> 元 素 之 后 (或 之 前 ) 更 合适 。 下 面 就 是 一 个 
<datalist> 元 系 的 示例 : 


«datalist id-"animalChoices"» 
«option label-"Alpaca" value-"alpaca"» 


«option label-"Zebra" value-"zebra"» 
«option label-"Cat" Value= Cat > 


«option label-"Caribou" value-"caribou"» 
«option label-"Caterpillar" value-"caterpillar"» 
«option label-"Anaconda" value= anaconda > 
«option label= Human value-"human"» 
«option label-"Elephant" values"elephant"» 
«option label-"Wildebeest" value-"wildebeest"» 
«option label-"Pigeon" Value= pigeon > 
«option label-"Crab" value-"crab"» 

«/datalist» 


与 原来 的 <select> 元 素 一 样 , <datalist> 也 使 用 <option> 定 义 数据 项 。 每 个 coption> 表 示 一 个 
可 供 选 择 的 建议 ， 其 label1 属 性 是 显示 在 文本 框 中 的 内 容 ， 而 value 属 性 是 最 终 会 发 送 给 服务 器 的 

















45 新 元 素 | 109 





值 (如 果 用 户 选择 了 该 项 )。 就 其 本 身 而 言 ，<datalist> 是 完全 不 可 见 的 。 为 了 将 它 与 文本 框 联 
系 起 来 以 便 提 供 建 议 ， 下 一 步 就 需要 将 cinput> 元 素 的 list 属 性 设 定 为 <datalist> 的 ID: 

«input id-"favoriteAnimal" list="animalChoices"> 

在 支持 cdatalist> 的 浏览 器 中 一 一 目前 只 有 Opera 10 和 Firefox 4+， 访 客 可 以 看 到 如 网 4-13 所 
示 的 结果 。 不 文 持 的 浏览 船 会 忽略 list 属 性 和 <datalist> 元 系 ， 所 有 建议 项 也 就 日 定义 了 。 

但 也 不 尽 然 , 我 告诉 大 家 一 个 不 错 的 后 备 技巧 ， 可 以 让 其 他 浏览 带 也 能 利用 这 些 数据 。 技 巧 
就 是 在 <datalist> 中 由 添加 为 一 个 元 系 。 这 个 技巧 之 所 以 可 行 ， 是 因为 文 持 <datalist> 的 浏览 带 
只 会 关注 其 中 的 <option> 元 素 , 而 会 急 略 其 他 内 容 。 下面 这 个 修改 后 的 例子 就 利用 了 这 一 点 。( 文 
持 cdatalist> 的 浏览 絮 会 忽略 其 中 的 粗 体 标记 。 ) 


<legend>What's Your Favorite Animal?«/legend» 
«datalist id-"animalChoices"» 
«span class-"Label"»Pick an option:«/span» 
«select id-"favoriteAnimalPreset"» 
«option label-"Alpaca" value-"alpaca"» 
«option label-"Zebra" value-"zebra"» 
«option label-"Cat" value="cat"> 
«option label-"Caribou" value-"caribou"» 
«option label-"Caterpillar" value-"caterpillar"» 
«option label-"Anaconda" value= anaconda > 
«option label-"Human" values"human"» 
«option label-"Elephant" value-"elephant"» 
«option label-"Wildebeest" value-"wildebeest"» 
«option label-"Pigeon" value-"pigeon"» 
«option label-"Crab" value-"crab"» 
</select> 
<br> 
<span class="Label">0r type it in:</span> 
</datalist> 
<input list-"animalChoices" name="list"> 


WER EHLE, RSW TE. mAAR, xdW«datalist?BJ20] Và zi 
仍然 只 会 显示 一 个 文本 框 和 一 个 下 拉 建 议 项 列表 (5 IA-13 ios H—RE). Tite Bt vas, 
新 添加 的 标记 会 把 cdatalist> 的 那些 建议 项 组 织 成 一 个 选择 列表 ， 并 允许 用 户 选 择 、 输 入 (如 
图 4-14 所 示 )。 

这 种 过 渡 完 全 没有 站 迹 。 只 不 过 在 服务 需 端 接收 到 表单 数据 后 ,需要 判断 数据 是 来 日 选择 列 
表 ( 即 这 里 的 favoriteAnimalPreset ) 还 是 来 目 文 本 框 ( 即 favoriteAnimal )。 虽然 会 多 费 这 一 点 点 周 
H, 但 毕竟 为 用 户 提 供 了 很 大 的 方便 ， 没 有 抛弃 任何 人 。 























注意 最 初 引 入 <datalist> 元 素 的 时 候 , 还 为 它 设计 了 一 个 从 其 他 地 方 ( 如 Web 服 务 器 ， 然 后 可 
能 再 访问 数据 库 ) 取得 数据 的 功能 。 在 HTML 标 准 未 来 的 版 本 中 ， 可 能 还 会 正式 增加 这 
项 功能 。 不 过 现在 要 想 实 现 这 项 功能 ， 了 奴 怕 还 只 能 自己 写 JavaScript 代 码 ， 利 用 
XMLHttpRequest 对 象 (参见 11.1.1 节 ) 来 获得 数据 。 
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~ DE) 图 4-14: 在 不 支持 cdatalist> 的 浏览 


( » D &) CAHTML5\ Chapter 04\Datalist.html p-ox| f sy i 器 中 也 可 以 使 用 建议 项 , 但 需要 把 建 
| E Zookeeper Form x | | TIE AE 千 一 个 <select> 列 表 中 


Zoo Keeper Application Form 


Please complete the form. Mandatory fields are marked with a * 


WHAT'S YOUR FAVORITE ANIMAL? 


Fick an option: |Alpaca [~] 


Or type it in: | 


Submit Application 





4.5.2 ”进度 条 和 计量 条 


另外 两 个 新 图 形 微 件 是 <progress> 和 《meter> , 这 两 个 元 素 外 观 相 似 , 作 用 不 同 ( 参见 图 4-15 )。 





























| T ë eE 图 4-15: 在 支持 的 浏览 中 
: e Progress and Meter xW | [C] Progress and Meter 

| C Q ProgressAndMeter.html a € 3. | ||| | ProgressandMeterhtm — -|C || fit || EX 中 ， «meter > 与 <pTogI ess» 
| Pr 能 够 提供 形象 的 度量 
Progress Bars Progress Bars (2c) 。 而 在 其 他 浏览 
Current progress: mm Current progress: 50% 


中 , 则 会 显示 你 设 定 的 后 


HAAA) 


Current progress: |H 





— Current progress: Task in progress... 


Meter S Meters 


Your suitcase weighs: WIN Your suitcase weighs: 28 pounds 
Your suitcase weighs: pem * Your suitcase weighs: 79 pounds* 


* A surcharge applies to suitcases heavier than 70 pounds. * A surcharge applies to suitcases heavier than 70 pounds. 


Our goal is to raise $50,000 for SLF (Save the Our goal is to raise $50,000 for SLF (Save the 


Lemmings Foundation). Lemmings Foundation). 
So far we've raised $14,000. 


So far we've raised $14,000. imm 
HHP, «progress» 4E 4$ BJSEBE, FRNKE, SEOBJBEAIEGUOJWKSISN RER Dex 
个 形象 ， 大 家 可 能 都 很 熟悉 ，Windows 操 作 系统 中 复制 文件 时 就 会 出 现 这 种 进度 条 。 不 过 ， 用 户 
查看 网 页 的 浏览 絮 不 同 ， 进 度 条 的 样子 也 可 能 不 同 。 
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而 <meter> 元 系 表 示 的 是 位 于 已 知 范围 内 的 一 个 值 。 乍 一 看 ，<meter> 与 <progress> 的 外 观 相 
同 ， 但 实际 上 绿色 条 阴影 更 次 一 些 ， 而 且 没 有 脉动 效果 。 根 据 浏 览 需 不 同 ， 计 量 条 的 颜色 可 能 会 
在 值 “ 过 低 ” 或 “过 高 ”的 时 候 改变 。 比 如 ， 图 中 后 一 种 情况 下 ，Chrome 把 绿 条 变 成 了 黄 条 。 
但 <meter> 与 progfess> 最 大 的 不 同 ， 还 是 标记 要 表达 的 语义 。 

















注意 ”严格 来 讲 ， 新 的 <meter> 与 <progress2 元 素 并 非 必须 出 现在 表单 中 。 实 际 上 ， 它 们 甚至 都 
不 是 真正 的 控件 ( 因为 它们 不 能 从 网 页 访客 那里 收集 信息 )。 可 是 ,第 方 的 HTML5 规 范 
把 它们 归 为 一 类 ， 也 是 考虑 <meter> 与 <progress> 元 素 给 人 的 感觉 像 是 控件 (以 图 形 的 方 
式 显示 数据 )。 


当前 ，Chrome 9+, Opera 11+ 和 Safari 5.1+ 支 持 cmeter> 与 <progress> 元 床 。Firefox 和 IE 暂 时 
还 不 文 持 它们 。 

使 用 cmeter> 与 <progress> 很 简单 。 先 来 看 看 <progress>， 它 有 一 个 value 属 性 ， 用 于 设置 表 
示 进 度 的 百分比 ( 即 填充 的 绿色 条 的 宽度 )， 值 其 实 是 0 到 1 之 间 的 小 数 。 比 如 ， 可 以 用 0.25 来 表 
示 完 成 了 进度 的 25%: 

«progress value="0.25"></progress> 


另外 ， 也 可 以 利用 max 属 性 设置 最 大 值 ， 改 变 进度 条 的 比例 。 例 如 ，max 设 为 200， 那 么 value 
束 要 位 于 0 和 200 之 则 。 如 末 把 value 设 为 50， 那 么 结 来 殊 和 前 面 例子 中 将 value 设 置 为 0.25 (25%) 
一 样 : 

«progress value="50" max="200"></progress> 


这 个 比例 其 实 就 是 为 了 让 人 看 着 方便 。 而 浏览 网 页 的 人 也 不 会 看 到 进度 条 中 实际 的 值 。 

















注意 ”实际 上 , <progress2》 元 素 只 是 一 种 显示 立体 进度 条 的 便捷 方式 , 这 个 元 素 本 身 什 么 也 不 会 
做 。 比 如 ， 要 是 想 利 用 进度 条 来 显示 后 台 任 务 ( 比 如 ， 使 用 12.2.2 节 中 的 Web Worker ) 的 
进度 ， 那 么 你 必须 自己 编写 JavaScript 代 码 取 得 5pTogress> 元 素 并 实时 更 新 它 的 值 。 


不 文 持 <progress> 元 素 的 浏览 大 会 忽略 它 。 作 为 后 备 , 可 以 在 这 个 元 系 内 部 放置 进度 值 , 如 : 

«progress value="0.25">25%</progress> 

WIE, ， 在 支持 <progress> 元 系 的 浏览 希 中 ， 是 不 会 显示 这 个 后 备 内 容 的 。 

除了 实际 显示 进度 的 进度 条 , 还 有 另外 一 种 进度 条 一 一 不 确定 进度 条 。 不 确定 进度 条 表示 反 
正 有 后 台 任 务 , 但 到 底 什么 时 候 完 成 不 知道 (可 以 想象 那些 永远 也 不 俘 转 的 GIF 图 )。 不 确定 进度 
条 也 是 灰色 背景 ， 但 不 断 会 有 绿色 闪 过 ， 从 左 到 在 。 要 创建 不 确定 进度 条 ， 只 要 不 设置 value 值 
BJ n] : 

«progress»Task in progress ...«/progress» 


<meter> 元 系 大 臻 也 一 样 ， 只 不 过 它 表 示 的 是 某 种 计量 ， 因 此 也 被 称 为 计量 器 。 一 般 来 说 ， 
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给 <meter> 元 系 设 置 的 值 都 会 对 应 现实 中 的 某 个 值 C 比如 ， 钱 数 、 天 数 或 重量 )。 为 了 控制 cmeter> 
元 素 显 示 这 些 数 据 的 方式 ， 需 要 设置 一 个 最 大 值 和 一 个 最 小 值 〈《 使 用 max 和 min 属 性 小 


Your suitcase weighs: «meter min="5" max="70" value="28">28 pounds«/meter» 


IHE, fz-F«meter»;U RT tj 8 RZN, RRENA KIN Vai HH LZ o 
当然 ， 有 时 候 把 cmeter> 元 系 的 值 显示 出 来 也 是 必要 的 。 此 时 ， 你 得 目 己 把 这 个 值 浴 加 到 页 面 中 ， 
不 要 依赖 提供 后 备 内 容 的 方式 。 下 面 的 代码 展示 了 相应 的 做 法 ， 即 先 显示 出 所 有 信息 ,然后 再 添 
加 一 个 可 选 的 cmeter> 元 素 ( 只 有 文 持 它 的 浏览 带 才 会 显示 ): 


«p»Our goal is to raise $50,000 for SLF (Save the Lemmings Foundation).</p> 
«p»So far we've raised $14,000. «meter max-"50000" value-'14000"»«/meter» 


为 了 让 <meter> 元 系 能 够 表示 那些 “过 高 ”或 “过 低 ” 的 值 ， 而 且 还 能 表示 得 恰如其分 ， 就 
需要 用 到 low 和 high 属 性 。 大 于 high (但 小 于 max ) 的 值 ， 就 说 明 超 过 了 它 应 有 的 大 小 了 ， 但 仍然 
是 可 以 接受 的 。 类 似 地 ， 小 于 low (但 大 于 min ) 的 值 就 是 过 低 了 : 


Your suitcase weighs: 

«meter min-"5" max="100" high-"70" value="79">79 pounds«/meter»* 
«p»«small»* A surcharge applies to suitcases heavier than 70 pounds. 
«/small»«/p» 


有 些 浏览 器 可 能 不 会 利用 这 些 信息 。 比 如 ，Chrome 对 于 过 高 的 值 会 显示 黄 条 (参见 图 4-15 ), 
但 对 于 过 低 的 值 则 没有 任何 变化 。 最 后 ， 还 可 以 使 用 optimum 属 性 将 某 个 值 标记 为 理想 的 值 ， 但 
这 个 属性 不 会 影响 计量 带 在 当前 浏览 各 中 的 显示 结果 。 

总 之 ， 只 要 浏览 侣 支持 ，<progress> 和 <meter> 就 可 以 为 用 户 带 来 一 些 便利 。 


























4.5.3 ”使 用 <command> 和 <menu> 创 建 工具 条 和 菜单 


这 个 功能 也 许 是 所 有 未 实现 功能 中 最 有 用 的 。 设 计 思 路 就 是 通过 一 个 元 素 ( «command» ) 来 
表示 用 户 可 以 执行 的 操作 ， 而 用 另 一 个 元 素 ( «menu» ) 来 封装 这 组 操作 。 灵 活 组 织 这 两 个 元 素 并 
为 它们 设置 适当 的 样式 ， 可 以 利用 <menu> 把 Mac 呆 面 下 方 的 可 停靠 工具 条 搬 到 浏览 器 窗口 中 来 ， 
或 者 创建 出 单 击 后 显示 的 弹出 式 上 下 文 菜 捍 。 可 是 , 现在 还 没有 浏览 带 文 持 这 两 个 元 对 ,所 以 要 
知道 它们 会 不 会 市 来 我 们 想象 的 效 来 ， 只 能 拭目以待 。 

















4.6 网 页 中 的 HTML 编辑 器 


第 1 草 我 们 就 讨论 过 ，HTML5 奉 行 “修补 牛 蹄 子路 ”的 原则 。 意 思 就 是 说 ， 把 今天 开发 人 
员 使 用 的 未 标准 化 的 功能 ， 正 式 写 入 HTML5 标 准 。 这 方面 的 一 个 例子 就 是 标准 化 了 两 个 奇怪 
的 属性 : contentEditable 和 designMode。 这 两 个 属性 的 作用 是 将 浏览 硕 转 换 成 简单 的 HIML 编 
TH dn o 

这 两 个 属性 早 就 已 经 有 了 。 事 实 上 ， 它 们 是 在 原先 正 一 统 天 下 的 时 候 ， 由 IE5 率 先 引 入 的 。 
随 着 越 来 越 多 Windows 扩 展 的 出 现 ， 大 多 开发 人 员 都 不 再 使 用 这 两 个 属性 了 。 但 随 着 时 间 推 移 ， 
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两 个 从 未 写 进 任何 标准 的 属性 。 


4.6.1 ”使 用 contentEditable 编 辑 元 素 


下 面 要 介绍 的 第 一 个 能 帮 我 们 实现 HTML 编 辑 功 能 的 属性 是 contentEditable。 把 这 个 属性 添 
加 到 任何 元 素 ， 都 可 以 使 该 元 素 的 内 容 可 以 编辑 : 


«div id-"editableElement" contentEditable»You can edit this text, if you'd 
like.«/div» 


乍 一 看 ， 可 能 还 看 不 出 有 什么 不 同 。 但 加 载 完 网 页 后 再 单 击 这 个 <div> 元 素 的 内 容 ， 你 就 会 
发 现 文本 编辑 光标 (插入 光标 )， 如 图 4-16 所 示 。 








何 时 使 用 HTML 编 辑 功能 
尝试 富 HIML 编 辑 功能 之 前 ， 有 必要 先 摘 清楚 这 个 功能 到 底 有 什么 用 。 除 了 能 带 来 新 奇 
感 之 外 ,能 编辑 HTML 实 际 上 对 任何 人 都 没有 什么 吸引 力 。 除非 你 需要 向 用 户 提供 一 种 简单 快 
捷 的 编辑 HTML 内 容 的 方式 ， 比 如 让 用 户 能 添加 博客 文章 、 输 入 评论 、 发 布 分 类 广告 或 者 编写 
发 送 给 其 他 用 户 的 消息 。 
即使 你 确定 需要 这 种 功能 ，contentEditable 和 designMode 属 性 也 未 必 是 第 一 选择 。 因 为 它 
们 不 能 提供 真正 的 网 页 设计 工具 所 具备 的 那些 好 用 的 功能 ， 比 如 修改 标记 、 查 看 和 编辑 HTML 
源 代码 、 拼 写 检 查 ,， 等 等 。 使 用 HTML 的 编辑 功能 ， 确 实 可 以 构建 更 好 用 的 编辑 器 ， 但 需要 做 
一 些 额 外 的 工作 。 可 是 ,如果 你 真 需 要 写 文 本 编辑 功能 ， 丈 怕 还 是 选择 别人 已 经 做 好 的 编辑 器 
更 方便 ， 只 要 把 相应 代码 插入 网 页 中 即 可 。 要 了 解 最 流行 的 一 些 宇文 本 编辑 器 ， 可 以 参考 这 篇 
博客 : http://ajaxian.com/archives/richtexteditors-compared. 








[Eee 区 本 balbas 图 4-16: 单 击 可 编辑 


( A A E] ElementEditing.htn O ~ > X| in ( A 5 J| &] ElementEditing.htn O ~ 9 X | D [X Joy 后 ， 就 可 以 通过 
e Element Editing | | | e Element Editing | | 键 & E 的 前 后 左 右 


人 is Editsbde aive E P 键 移动 光标 , 可 以 市 
除 文本 , 也 可 以 插入 


Yot cam edittttt this text, if you'd like. You can edittttt this text, if you'd like. 内 容 ( 左 ) 。 还 可 以 
O 




















if you'd like. ; . " pm 
if you'd like. 按 Shift Ë 选 择 并 A 


制 、 剪 切 、 粘 贴 文本 
( 右 ) o 很 像 在 Word 
中 编辑 文本 , 只 是 不 
能 超过 <div> 的 界限 








在 这 个 例子 中 ， 可 编辑 的 <div> 中 只 包含 文本 ,但 其 实 可 以 把 任何 元 系 放 入 其 中 。 就 算是 把 
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整个 页 面 放 到 里 面 ， 让 用 户 可 以 编辑 整个 页 面 也 没有 问题 。 类 似 地 ， 要 想 让 页 面 中 几 个 不 同 部 分 
可 以 编辑 ， 只 要 为 相应 元 系 应 用 contentEditable 属 性 即 可 。 








提示 “有些 浏览 器 支持 少量 的 内 置 命令 。 比 如 ， 在 世 中 使 用 快捷 键 CtrlHB、Ctrl+I 和 Ctrl+U 可 以 
为 文本 加 粗 、 加 斜体 和 加 下 划 线 。 类 似 地 ， 在 Firefox 中 ， 按 Ctrl+Z 可 以 撤销 上 一 次 操作 。 
而 在 Chrome 中 可 以 使 用 前 述 所 有 命令 。 要 想 进一步 了 解 这 些 编辑 命令 ， 以 及 如 何 创建 可 
以 触发 它们 的 自 定 义工 具 条 ， 请 参考 Opera 的 两 篇 文章 : http://tinyurl.com/htmlEditl 和 
http://tinyurl.com/htmlEdit2 。 


通常 ， 我 们 都 不 会 在 标记 中 设置 contentEditable 属 性 ， 要 设置 也 是 通过 JavaScript， 并 且 在 
编辑 完成 后 再 取消 可 编辑 的 功能 。 下 面 这 两 个 也 数 就 是 用 来 开启 和 关闭 编辑 功能 的 。 
function startEdit() 4 
// 让 元 素 可 以 编辑 
var element = document.getElementById("editableElement"); 
element.contentEditable = true; 


j 


function stopEdit() 1 
// 把 元 素 修 改 为 正常 状态 
var element = document.getElementById("editableElement"); 
element.contentEditable = false; 








// 在 消息 框 中 显示 标记 
alert("Your edited content: " + element.innerHTML); 


} 
以 下 两 个 按钮 用 于 触发 它们 : 


«button onclick="startEdit()">Start Editing</button> 
«button onclick="stopEdit()">Stop Editing</button> 


不 要 把 这 两 个 按钮 放 到 网 页 的 可 编辑 区 域 中 ! 因为 网 页 一 变 得 可 以 编辑 ,其 中 的 元 系 就 不 会 
产生 事件 ， 因 而 驶 无 法 再 触发 JavaScript 代 码 了 。 

图 4-17 展 示 了 元 系 变 成 可 编辑 之 后 和 为 其 中 内 容 应 用 一 些 样式 后 的 结果 (〈 拜 Ctrl+B 命 令 
上 所 网 )。 


























注意 不 同 浏览 器 中 的 写 HTML 编 辑 功 能 也 会 有 一 点 差异 。 例如， 在 Chrome 中 按 Ctrl+B 会 为 元 
素 添 加 <b> 标 签 ， 而 在 IE 中 则 会 添加 <strong> 标 签 。 而 在 按 回 车 键 换行 和 按 退 格 键 删 除 标 
签 时 ， 也 会 出 现 差异 。 说 到 这 ， 就 不 难 理解 HTMLS 标 准 化 家 HTML 功 能 的 的 意义 了 ， 至 
少 可 以 让 不 同 浏览 器 的 行为 一 致 。 
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(D Element Editing bee 


Editable «div» Below: 


You can edit this text, if you'd like. 
YES!! I would like. 


Start Editing| | Stop Editing 


@ Javascript Alert 





Your edited content: You can edit this text, if you'd 
like.« br» &nbsp; &nbsp;«b» YES! «/b» I would like. 





4.6.2 ”使 用 designMode 编 辑 页 面 


图 4-17; 这 个 图 证 明了 编辑 元 素 的 确 可 以 改变 页 面 在 内 存 


| | ”但 在 实际 应 用 中 ， 这 些 数据 会 被 发 送 给 Web 服 务 器 ， 或 
许 还 会 用 到 11.1.1 节 介绍 的 XMLHttpRequest 对 象 





与 contentEditable 属 性 类 似 , 但 designMode 属 性 能 够 让 用 户 编 辑 整个 页 面 。 你 也 许 会 问 : 如 
条 让 整个 页 面 都 可 以 编辑 ， 那 么 用 户 还 怎么 单 击 按钮 ， 我 们 还 怎么 控制 编辑 过 程 呢 ? 当然 有 办 
法 ， 那 就 是 把 要 编辑 的 文档 放 在 一 个 <iframe> 元 素 中 ， 而 这 个 元 系 就 充当 了 一 个 超级 的 编辑 框 





( 见 图 4-18 )。 





| L Page Editing t 





€ 3| file:///c:/HTML5S/Chapter 04/PageEditing.html 





— 


Editable Page 


than it's been for the average human being throughout all of 
recorded history. 


But don't get tco 
smug. There's still 
plenty of horrific 
ways it could all fall 
apart. In this article, 
you'll learn about a 
few of our favorites. 


Mayan Doomsday 


Skentics suggest that 





Start Editing | | Stop Editing | 





Edited HTML 

article» <header> <hgroup> <h1>How the World Could End</hl> «h2»Scenarios that ^ 
ispell the end of life as we know=/h2> «/hgroup^ «p class-"Byline"7by Ray N. | 
ICarnationz/p- </header> «div class-"Content"7 <p><span class-"LeadIn >Right E 
now=/span>, you're probably feeling pretty good. After all, life in the developed world |- 
is comfortable-span class-"style1"7— «/span-probably more comfortable than it's 

[been for the average human being throughout all of recorded history.</p> «figure 
Iclass-"FloatFigure" <img src-"human skulljpg" alt-"Human skull > 

*figcaption* Will you be the last person standing if one of these apocalyptic scenarios 





plays out?</figcaption> </figure> «p»But don't get too smug. There's still plenty of 
horrific ways it could all fall apart. In this article, you'll learn about a few of our 
lfavorites.</p> <h2>Mayan Doomsday=/h2> «p»Skeptics suggest that the Mayan 
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图 4-18: 这 个 页 面 中 包含 两 个 框 ， 第 一 个 是 
<iframe>, 其 中 显示 着 第 2 章 的 启示 录 页 面 。 第 
二 个 是 普通 的 <div>, 其 中 显示 编辑 后 的 启示 录 
页 面 的 HTML 标 记 。 页 面 中 的 两 个 按钮 控制 着 
显示 ， 用 于 将 <iframe> 切 换 为 设计 模式 








这 个 页 面 的 标记 十 分 简单 。 以 下 就 是 这 个 页 面 <body> 元 素 中 的 所 有 内 容 : 
<h1>Editable Page«/h1» 
«iframe id-"pageEditor" src-"ApocalypsePage Revised.html"»«/iframe» 
«div» 
«button onclick-"startEdit()"»Start Editing«/button» 
«button onclick-"stopEdit()"»Stop Editing«/button» 
</div> 


«hi»Edited HTML</h1> 
<div id="editedHTML"></div> 


显然 ,这 个 例子 有 赖 于 startEdit() 和 stopEdit() 方 法 ， 这 两 个 方法 与 前 面 的 示例 类 似 。 只 不 
过 这 里 的 代码 修改 的 是 designMode 属 性 ， 而 非 contentEditable 属 性 : 


function startEdit() { 4 
// 把 iffame> 转 换 为 设计 模式 


var editor = document.getElementById("pageEditor"); 
editor.contentWindow.document.designMode = "on"; 


j 


function stopEdit() { 
// 关 闭 <iframe> 的 设计 模式 
var editor = document.getElementById("pageEditor"); 
editor.contentWindow.document.designMode = "off"; 





// 显 示 编 码 后 的 HTML ( 仅 为 验证 确实 可 以 编辑 ) 
var htmlDisplay = document.getElementById("editedHTML"); 
htmlDisplay.textContent = . editor.contentWindow.document.body.innerHTML; 








通过 这 个 例子 可 以 更 好 地 体验 定 文 本 编辑 功能 。 例 如 ， 单 击 图 片 就 可 以 在 浏览 器 中 操作 它 。 
可 以 调整 它 的 大 小 , 把 它 拖 到 新 位 置 ， 或 者 单 击 之 后 按 删除 键 就 可 以 把 它 删 除 。 如 果 页 面 中 有 表 
单 控 件 ， 那 么 对 它们 也 可 以 执行 相同 的 操作 。 

当然 ， 要 想 把 这 个 例子 变 得 更 实用 还 需要 做 很 多 工作 。 第 一 ， 需 要 添加 更 直观 的 编辑 控件 。 
在 此 ， 我 还 要 推荐 Opera 乐 于 助人 的 开发 人 员 写 的 那 两 篇 文 曹 〈http:/tinyurl.com/htmlEditl 和 
http://tinyurl.com/htmIEdit2 )， 文 章 深 入 解释 了 命令 模型 ， 但 超出 了 本 草 的 范围 。 第 二 ， 需 要 妥善 
处 理 编辑 后 的 标记 ， 比 如 通过 XMLHttpRequest (参见 11.1.1 节 ) 把 它们 发 送 给 Web 服 务 器 。 

最 后 还 要 提醒 读者 ,如 果 你 是 在 本 地 硬盘 上 运行 上 面 的 例子 , 在 有 些 浏 览 器 中 可 能 会 遇 到 问 
题 。( IE 和 Chrome 会 启用 安全 限制 , 而 Firefox 则 一 帆 风 顺 , 不 会 有 任何 问题 。) 为 了 避免 出 现 问 题 ， 
可 以 在 http:/www.prosetech.com/html5/ 上 运行 这 个 例子 。 
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音频 与 视频 





Ex 早 的 时 候 ， 因 特 网 主要 用 于 分 享 学 术 研 究 的 成 果 。 情 况 很 快 就 发 生 了 改变 ，Web 似 乎 

HY. 一 夜 之 问 就 成 了 万 众 瞩 目的 焦点 ， 成 了 商业 发 展 背后 的 动力 之 源 。 一 转眼 ， 就 到 了 现 
在 。 今 天 的 因特网 已 经 成 为 媒体 的 天 堂 ， 铺天盖地 的 滑稽 视频 、 世 界 各 地 的 小 提琴 演奏 录像 ， 数 
Hz, 4 AS. 

这 种 转变 之 大 , 难以 言 表 。2005 年 年 初 ,“ 那 一 定 是 件 美 事 ”的 梦想 , 如 今 已 经 幻化 成 YouTube 
这 个 世界 第 三 大 的 视频 分 享 网 站 。 三 四 分 钟 长 的 视频 已 经 占据 互联 网 ( 以 及 我 们 的 部 分 生活 空 
间 )。 网 络 巨 忌 Cisco 报 告 ， 这 种 趋势 并 未 减 慢 ， 预 计 到 2013 年 网 络 流量 的 90% 都 将 用 于 视频 。 

令 人 难以 置信 的 是 ， 这 种 巨大 的 转变 居然 是 在 HTML 和 浏览 器 不 内 置 支持 视频 ， 甚 至 连 音频 
都 不 支持 的 现实 下 发 生 的 。 没 错 , 功劳 应 该 记 在 Flash 身 上 ,这 个 插件 大 多 数 时 候 对 大 多 数 人 都 是 
有 效 的 。 但 是 也 有 一 个 显而易见 的 讶 点， 苹果 公司 的 iPad 从 发 布 之 初 就 不 支持 Flash。 

为 了 填补 这 个 空白 ，HTMLS 添 加 了 “<audio> 和 xvideo> 这 两 个 HTML 多 年 来 一 直 缺 少 的 元 素 。 
最 终 ， 使 富 媒体 得 到 了 标准 、 一 致 昌 不 依赖 插件 的 支持 。 然 而 ,事情 并 非 都 那么 一 帆 风 顺 。 主 流 
浏览 器 公司 身 陷 音 频 与 视频 格式 的 争斗 ， 而 这 种 争斗 一 点 也 不 比 蓝光 与 HD-DVD 的 较量 更 光彩 。 
结局 当然 不 好 : 没有 任何 一 种 音频 和 视频 格式 得 到 所 有 浏览 器 支持 。 为 了 让 媒体 文件 在 HTML5 
中 能 正常 播放 ， 你 必须 针对 不 同 格式 分 别 进行 编码 。 本 章 将 介绍 这 些 内 容 。 不 过 ,在 此 之 前 有 必 
要 回顾 一 下 历史 ， 用 全 局 的 眼光 来 审视 一 下 HTML5 问 世 之 前 视频 世界 的 境况 。 


5.1 理解 今天 的 视频 


在 没有 HTML5 的 情况 下 ， 可 以 通过 两 种 方式 癌 网 页 中 添加 视频 。 最 简单 的 方式 ， 就 是 使 用 
<embed> 元 系 把 视频 便 赛 进 页 面 中 。 然 后 ， 浏 览 亏 就 可 以 使 用 Windows Media Player, Apple 
QuickTime 或 其 他 视频 播放 器 创建 一 个 视频 窗口 ， 并 把 它 放 在 页 面 中 。 

这 种 方式 的 问题 是 一 切 只 能 听天由命 。 你 没有 办 法 控制 播放 进度 , 也 不 能 提前 绥 冲 视频 以 避 
免 长 时 间 的 播放 停滞 ， 甚 至 你 都 不 知道 自己 的 视频 文件 能 否 在 不 同 浏 览 器 或 操作 系统 中 播放 。 

第 二 种 方式 是 使 用 浏览 响 插 件 ， 比 如 微软 最 近 推 出 的 Silverlight 或 最 普遍 的 Adobe Flash. 
Flash 完 全 解决 了 浏览 器 支持 问题 ，Flash 视 频 能 够 在 安装 了 Flash 插 件 的 任何 地 方 播放 ; 用 数字 来 
说 ， 就 是 目前 能 上 网 的 计算 机 中 有 99% 都 安装 了 Flash 播 放 器 。Flash 为 我 们 提供 了 几乎 无 限制 的 
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控制 功能 ， 而 且 我 们 还 可 以 方便 地 使 用 别人 做 好 的 Flash 播 放 需 ， 甚 至 每 个 发 光 按 钮 你 都 可 以 自 
己 重 新 设计 。 

不 过 ，Flash 也 不 完美 。 为 了 把 Flash 视 频 放 到 网 页 中 ， 必 须 使 用 cobject> 和 <embed> 元 系 编 写 
一 大 推 乱七八糟 的 标记 , 必须 适当 地 编码 视频 文件 , 可 能 还 必须 要 人 花 高 价 购买 Flash 开 发 软件 并 学 
习 使 用 一 一 轻易 学 不 会 。 但 是 ， 最 严重 的 问题 还 在 于 苹果 发 布 的 新 移动 设备 iPhone 和 iPad。 它 们 
根本 就 不 支持 Flash， 因 而 通过 它们 查看 内 置 Flash 视 频 的 页 面 ， 只 能 看 到 一 个 空白 的 方 框 。 











注意 ”插件 不 可 靠 也 是 业界 的 共识 。 这 也 是 插件 的 工作 方式 决定 的 。 Mos 在 访问 使 用 Flash 的 
页 面 时 ， 浏 览 器 会 cci AEE AX X fRFlashdjzd].o SAKAT, ZLE 
程 都 比较 顺利 。 可 是 ， 一 些小 bug 的 存在 ， ww ea 
和 故障 ， 因 而 造成 视频 混乱 或 消耗 大 量 计算 机 内 存 ， 最 终 让 上 网 变 得 缓慢 无 比 。 





尽管 如 此 , 今天 上 网 (不 用 iPhone 或 iPad ) 所 看 到 的 视频 ,仍然 都 被 包装 在 迷你 Flashi 必 用 中 。 
你 不 信 ? 右键 单 击 视频 播放 融 看 一 看 。 如 果 上 下 文 菜单 中 包含 “About Flash Player 10” 字 样 的 命 
令 ， 那 茶 喜 你 ， 你 点 的 就 是 无 所 不 在 的 Flash 搬 件 。 而 且 ， 即 使 是 使 用 HTMLS， 臣 人 我们 还 要 准 
备 一 个 Flash 视 频 作 为 后 备 文 件 ， 以 应 付 那些 落后 的 浏览 句 〈 比如 IE8 )。 
注意 ”2010 年 ,YouTube 开 始 测试 HTML5 视 频 播 放 器 ,要 想 体验 ,请 访问 www.youtube.com/html5。 
但 在 其 他 地 方 ，YouTube 仍 然 只 使 用 Flash。 


5.2 HTML5 音频 与 视频 


HTMLS 文 持 音频 和 视频 的 想法 非常 简单 。 既 然 能 使 用 cimg> 元 素 在 网 页 中 添加 图 像 ， 就 应 该 
能 使 用 caudio> 元 素 和 <video> 元 素 在 网 页 中 添加 音频 和 视频 。 是 这 个 道理 , 于 是 HTML5 就 增加 了 
这 两 个 元 素 。 








不 行 就 还 用 Flash 
HTMLS 新 增 的 音频 和 视频 功能 不 能 满足 所 有 需求 。 如 果 你 需要 考虑 以 下 事项 ， 那 么 最 好 
还 是 用 Flash (至 少 目前 还 是 要 用 )。 
口 有 许可 限制 的 内 容 。HTMLS 视频 文件 没有 任何 版 权 保 护 措施 。 事 实 上 ， 任 何人 都 可 像 
下 载 图 片 一 样 下 载 HTMLS 视频 ， 只 要 右键 单 击 即 可 。 
口 录制 视频 或 音频 。HTMLS 不 支持 从 一 台电 脑 到 另 一 台电 脑 传 送 音 频 或 视频 流 。 如 果 你 
想 开 发 一 个 在 线 聊 天 程序 ,要 使 用 访客 机 器 上 的 麦克 风 和 摄像 头 , 还 得 用 Flash。HTML5 
制定 者 为 实现 相同 功能 ， 正 党 试 新 增 cdevice> 元 素 。 但 目前 在 任何 浏览 器 中 ， 都 没有 办 
法 只 通过 HTML 实现 此 功能 。 
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口 自 适 应 视频 流 。 主 流 的 、 视 频 丰 富 的 网 站 ， 比 如 YouTube， 都 需要 精细 地 控制 视频 流 和 
缓冲 。 这 些 网 站 需要 以 不 同 解析 度 提供 视频 、 进 行 实况 直播 、 根 据 访 客 的 带宽 调整 视频 
质量 。 在 HIMLS 能 提供 这 些 功能 之 后 ， 视 频 分 享 网 站 可 能 会 向 HTML5 迁移 ， 但 不 会 
完全 脱离 Flash。 

口 低 延迟 、 高 性 能 音频 。 有 些 应 用 需要 音频 一 开始 就 不 能 间断 ， 或 者 需要 同时 播放 的 多 个 
音频 之 间 完 美 配 合 。 比 如 虚拟 合成 器 、 音 乐观 察 器 或 者 多 种 音效 同时 播放 的 实时 游戏 。 
虽然 浏览 器 开发 商 在 努力 提升 HTMLS 音频 的 性 能 ， 但 目前 还 无 法 满足 要 求 。 

O 动态 创建 或 编辑 音频 。 如 果 你 不 只 是 想 要 播放 录制 好 的 音频 ,而 是 还 需要 分 析 、 修 改 音 
频 信 息 , 然后 实时 生成 音频 , 怎么 办 ?确实 有 一 些 新 的 标准 ,比如 Firefox 资助 的 Audio 
Data API ( http://wiki.mozilla.org/Audio Data API )， 可 以 为 HTMLS 补充 这 部 分 功能 ， 
但 目前 还 是 指望 不 上 啊 。 


5.2.1 使 用 <audio> 播 放 点 噪音 
以 下 是 使 用 caudio> 元 素 的 一 个 最 简单 的 例子 : 


«p»Hear us rock out with our new song, 
«cite»Death to Rubber Duckies«/cite»:«/p» 
«audio src-"rubberduckies.mp3" controls»«/audio» 


NHE src/ PE TE E REC M FRF o Ticontrols E EEY Và, ds 2e [2 13 A47 TJ TAE 
BEES. BRAX3NDWSSRUBHJTREGOELPABANK—RE,. RRBSCRB—RE, Bn] AERA RMR, SES. 
位 置 和 调节 音量 (图 $-1 )。 








Hear us rock out with our new song. Death to Rubber Duckies: Eo : 这 里 是正 上 | SL a ü | NlFircfox 

| (T) 中 的 播放 控件 。 不 过 ， 要 想 让 音频 文件 在 

-—————— MEA Ó À 这 三 种 浏览 颖 中 都 能 正常 播放 ， 还 必须 有 和 针对 
性 地 定制 音频 格式 ， 详 细 内 容 将 在 5.3 市 介绍 


Hear us rock out with our new song. Death to Rubber Duckies: 


Hear us rock out with our new song. Death to Rubber Duckies: 


y a 0 
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注意 “audio> 和 video> 元 素 必 须 同 时 包含 开 始 和 结束 标签 ， 不 能 使 用 Kaudio /> 这 样 的 空 元 素 
语法 形式 。 


<audio> 元 素 还 支持 另外 三 个 属性 : preload、autoplay 和 1loop。 其 中 ，preload 属 性 告诉 浏览 
妖 如 何 下 载 音频。 如果 指 定 的 值 是 auto， 就 是 让 浏览 妖 下 载 整 个 文件 ， 以 便 用 户 单 击 播放 按钮 时 
就 能 播放 。 当 然 , 下 载 过 程 是 后 台 进 行 的 ， 网 页 访客 不 必 每 待 下 载 完 成 ， 而 且 仍 然 可 以 随意 查看 
网 页 。 

除了 auto 之 外 ，preload 属 性 还 支持 为 外 两 个 值 : metadata 和 none。 前 者 告诉 浏览 套 先 获取 音 
频 文件 开头 的 数据 块 ， 从 而 足以 确定 一 些 基本 信息 〈 比 如 音频 的 总 时 长 )。 后 者 告诉 浏览 需 不 必 
预先 下 载 。 恰 当地 利用 这 些 信 ， 可 以 省 市 宽 。 比 如 ， 当 页 面 中 有 很 多 <audio> 元 素 ， 而 你 又 不 
认为 访客 会 播放 其 中 很 多 音频 的 时 候 ， 就 可 以 有 选择 地 使 用 前 述 三 个 值 。 

«audio src-"rubberduckies.mp3" controls preload="metadata"></audio> 
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^E. 浏览 硕 在 下 载 后 续 数 据 时 , 会 播放 已 经 下 载 完 的 部 分 ; 除非 你 的 网 速 很 慢 , 否则 应 该 不 会 卡 。 

如 末 没 有 设置 preload 属 性 ， 浏 览 融 就 目 己 决定 是 否 预先 下 载 了 。 对 这 一 点 ， 不 同 浏 览 厢 的 
处 理 方 式 也 不 一 样 。 多 数 浏 览 顺 将 auto 作 为 默认 值 ， 但 Firefox 的 默认 值 是 metadata。 不 过 ， 也 请 
大 家 注意 ， 这 个 preload 属 性 也 不 是 必须 严格 执行 的 规则 ， 而 只 是 你 对 浏览 需 的 建议 。 根 据 具 体 
情况 ， 浏 览 瘟 可 以 忽略 你 的 设置 。( 有 些 旧 版 本 浏览 套 根 据 不 会 在 意 preload 属 性 。) 





























注意 ”如 果 页 面 中 有 很 多 <audio> 元 素 ， 浏 览 器 会 分 别 为 它们 创建 自己 的 播放 控件 。 访 客 可 以 每 
次 只 播放 一 个 音频 文件 ， 也 可 以 同时 播放 多 个 。 


接 下 来 骨 看 看 autoplay 属 性 。 这 个 属性 告诉 麟 览 带 在 加 载 完 首 频 文件 后 立即 播放 : 

«audio src-"rubberduckies.mp3" controls autoplay»«/audio» 

如 果 不 设 置 autoplay 属 性 ， 必 须 是 用 户 单 击 播放 按钮 才 会 播放 音频 文件 。 

可 以 利用 caudio> 元 系 不 知 不 沉 地 播放 育 景 音乐 ， 或 者 为 训 览 锅 族 戏 播放 音效 。 要 实现 育 隶 
播放 ， 去 挥 controls 属 性 ， 加 上 autoplay 属 性 就 好 了 (或 者 利用 JavaScript 来 控制 播放 ， 参 见 5.4.1 
T) 不 过 要 注意 ,即使 开局 背景 播放 ， 也 要 在 页 面 中 提供 相应 的 装置 ， 以 便 用 户 能 够 关闭 声音 。 














警告 ” 谁 也 不 愿意 浏览 一 个 播放 难听 的 背景 音乐 ， 但 却 无 法 关闭 其 声音 的 网 页 。 如 果 你 没有 给 
<audio> 元 素 添 加 controls 属 性 ， 那 必须 或 至 少 要 添加 一 个 静音 按钮 ， 利 用 JavaScript 
让 用 户 能 够 设置 静音 。 





最 后 ，loop 属 性 告诉 浏览 瘟 在 首 频 到 达 末 尾 时 ， 再 从 头 开 始 重 新 播放 : 


«audio src-"rubberduckies.mp3" controls loop»«/audio» 
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大 多 数 浏览 器 都 可 以 流畅 地 循环 播放 音频 文件 , 因此 可 以 利用 这 一 点 创建 没有 穷尽 的 音乐 播 
放 体 验 。 关 键 在 于 选择 一 段 终 点 与 起 点 恰好 能 够 衔接 起 来 的 首 频 片段 。 类 似 这 样 的 片段 ， 访 问 
http://www.flashkit.conyloops/ 可 以 找到 很 多 。( 这 些 可 循环 文件 是 为 Flash 设 计 的 ,但 也 可 以 下 载 到 
MP3 和 WAV 格 式 的 。) 

要 是 你 觉得 caudio> 元 素 实在 是 太 好 了 , UE, 我 也 承认 。5.3 节 将 介绍 让 HITMLS 开 发 人 员 头 痛 
欲 裂 的 格式 问题 。 不 过 , 在 头疼 之 前 , 我 还 得 先 给 你 介绍 caudio> 元 素 的 亲密 战友 : “video> 元 素 。 





5.2.2 ”了解 <video> 


<video> 与 <audio> 实 现 太 相像 了 。 它 们 有 相同 的 src、controls、preload、autoplay 和 loop 属 
性 。 下 面 就 是 一 个 下 观 的 例子 : 


«p»A butterfly from my vacation in Switzerland!«/p» 
«video src-"butterfly.mp4" controls»«/video» 


同样 controls/&E TET URDU vias ENRERE (CD.EIS-2), TEX EAR, Hub 
页 面 其 他 任何 地 方 , 播放 控件 都 会 目 动 隐藏 , T IA BUE T se Hh BB ERST, 它们 又 会 显示 出 来 。 








图 $-2: 很 容易 把 <video> 元 素 当 成 Flash 视 频 
窗口 。 但 在 <video> 元 素 上 右 击 鼠标 ， 会 看 
到 比 Flash 更 简单 的 菜单 ,其 中 包含 把 视频 文 
件 保存 到 本 地 的 命令 ( 在 有 的 浏览 器 里 ， K 
单 中 可 能 还 会 包含 改变 播放 速度 、 循 环 播放 
视频 、 全 屏 播放 及 静音 等 选项 ) 


N Pause 


Mute 


Save Video As... 
Copy Video URL 


Play Speed 














除了 与 <audio> 共 同 的 属性 之 外 ，<video> 元 又 还 有 为 外 3 个 属性 : height、width 和 poster。 
其 中 ，height 和 width 属 性 用 于 设置 视频 窗口 的 (像素 ) 大 小 。 下 面 这 行 代码 会 创建 一 个 400 
像素 x 300 像 系 的 视频 窗口 . 


«video src="butterfly.mp4" controls widthz"400" height="300"></video> 
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在 设置 这 个 尺寸 时 ,应 该 注音 按照 视频 的 原始 比例 设置 。 而 明确 设置 视频 窗口 大 小 ,可 以 在 
钢 频 尚未 加 载 完 成 时 (或 者 视频 加 载 失 败 时 )， 不 影响 页 面 的 布局 。 

最 后 ，poster 属 性 用 于 设置 蔡 换 视频 的 图 片 。 浏 览 硕 在 三 种 情况 下 会 使 用 这 个 图 片 : (1) 视 
频 第 一 帧 未 加 载 完毕 ; (2) 把 preload 属 性 设置 为 none; (3) 没有 找到 指定 的 视频 文件 。 

«video src-"butterfly.mp4" controls poster="swiss alps.jpg'»«/video» 

好 了 ， 我 们 现在 已 经 介绍 完 有 关 HIMLS5 音 频 和 视频 标记 的 所 有 内 容 了 。 然 而 ， 通 过 巧妙 地 
使 用 JavaScript, 实际 上 还 有 更 多 可 能 性 。 不过, 我 们 已 经 不 能 再 回避 了 , 在 继续 讨论 利用 <audioy> 
和 <video> 元 素 做 一 些 吸 引 人 的 东西 之 前 ， 无 论 如 何 得 特 面 令 人 头疼 的 音 视频 编 解 码 问 题 。 

















—— 


注意 HTML5 标 准 还 为 <audio> 和 <video> 规 定 另 外 两 个 属性 : muted 和 mediagroup。 前 者 用 于 在 
一 开始 就 关闭 声音 (访客 点 击 播放 按钮 即 可 打开 声音 ),， 后 者 用 于 把 多 个 媒体 文件 链接 到 
一 起 ， 从 而 实现 多 个 文件 同步 播放 ( 在 视频 配合 独立 声音 文件 的 时 候 有 用 )。 然 而 ， 这 两 
个 属性 目前 还 没有 得 到 任何 浏览 器 支持 。 


5.3 格式 之 争 与 后 备 措施 


我 们 刚刚 列举 的 示例 使 用 了 两 种 流行 的 标准 : MP3 音 频 和 H.264 视 频 。 这 两 种 格式 是 IE9 和 
Safari 的 最 爱 ， 但 其 他 浏览 厚 则 有 它们 目 己 的 想法 (图 $-3 )。 


Hear us rock out with our new song. Death to Rubber Duckies: 5 -3 : 在 Firefox 中 播 放 MP3 文件 ( E ) 4H 在 IE 中 播 放 Theora 
视频 ( 下 ) ， 哈 ， 这 就 是 让 人 头疼 的 地 方 了 


A butterfly from my vacation 1n Switzerland! 





说 起 HTML5 格 式 之 争 , 作为 Web 开 发 人 员 , RA P8 JL IRIURE L— UL, BL XEIÉSHTMLS 
音频 和 视频 就 这 样 永远 地 分 裂 下 去 ” 而 谁 又 是 徘 鬼 祸首” 呼 …… 好 吧 , 问题 没有 上 听 起 来 那么 好 回 
Z o 不同 浏览 带 开 发 商 郡 有 十 足 的 理由 倾向 于 不 同 的 视频 标准 。 小 公司 ( 像 Firefox 背 后 的 Mozilla ) 
不 愿意 付 给 流行 的 标准 一 一 MP3 音 频 、H.264 视 频 专 利 费 。 可 是 ， 真 的 很 难 责怪 他 们 ， 他 们 目 己 
的 开发 成 果 都 是 可 以 自由 使 用 的 。 
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而 大 一 些 的 公司 ， 像 微软 、 笠 果 ， 又 都 言 之 辫 辫 ， 为 目 己 不 使 用 没有 许可 限制 的 标准 辩护 。 
他 们 报 怨 那些 标准 并 不 完善 ( 目前 还 没有 便 件 加 速 )， 而 且 应 用 也 不 够 广泛 〈 不 像 H.264 已 经 广泛 
应 用 于 便携 式 摄像 机 、 赣 光 播 放 般 和 其 他 很 多 设备 ) 实际 上 ， 最 大 的 问题 还 在 于 ， 谁 也 说 不 清 
楚 那 些 没有 许可 限制 的 标准 是 否 涉及 其 他 人 的 知识 产权 。 如 末 是 , 而 且 微 软 、 平 果 又 使 用 了 它们 ， 
那么 打上 一 场 上 旷日持久 的 家 司 就 在 所 难免 了 。 














H.264 许 可 

我 的 视频 格式 是 H.264， 我 需要 付 许可 费 吗 ? 

如 果 你 在 自己 的 产品 中 使 用 了 H.264 解 码 器 ( 比如 ， 你 开发 了 一 款 浏览 器 ， 能 播放 H.264 
编码 的 视频 )， 那 当然 得 付费 。 而 如 果 你 是 提供 视频 的 人 ， 那 就 要 看 情况 了 。 

首先 ， 听 听 不 用 掏 钱 的 情况 。 如 果 你 使 用 H.264 制 作 免 费 视频 ， 你 不 用 交 一 分 钱 。 如 果 你 
制作 的 是 商业 视频 ， 但 实际 上 并 没有 销售 ( 比如 拍摄 商业 广告 或 通过 视频 访谈 推销 自己 )， 那 
也 不 用 花 钱 。 

如 果 你 在 自己 的 网 站 上 销售 H.264 编 码 的 视频 ， 那 可 能 就 需要 向 MPEG-LA 支 付 许 可 费 了 ， 
要 么 现在 ， 要 么 将 来 。 关 键 的 问题 是 有 多 少 用 户 。 如 果 用 户 数 少 于 10 万 ， 不 用 交 钱 。 而 如 果 用 
户 数 达到 10 万 , 少 于 25 万 , 那么 应 该 交 25 000 美 元 /年 。 对 于 一 家 如 此 规模 的 视频 销售 公司 来 说 ， 
这 笔 钱 似乎 还 不 算 多 ,更 何况 还 有 很 多 其 他 花 销 比 这 要 多 得 多 ， 比 如 购买 专业 的 编码 工具 。 可 
是 ， 这 个 数字 在 2016 年 修订 许可 条 款 后 ， 还 会 有 变化 。 打 算 靠 Web 视 频 挣 钱 的 大 公司 更 愿意 使 
用 开放 的 、 没 有 许可 限制 的 视频 标准 ， 比 如 Theora 或 WebM。 

要 全 面 了 解 H.264 的 许可 条 款 , 请 参考 www.mpegla.comy/main/programs/AVC/Pages/Intro.aspx。 


5.9.1. 谈 谈 格式 


害 方 HTML5 标 准 没 有 要 求 浏 览 瘟 支持 任何 一 种 视频 或 音频 格式 。( 之 前 的 版 本 要 求 过 , 但 最 
后 经 过 激烈 的 讨论 后 还 是 删除 了 。) 因此 ， 训 览 带 开发 商 可 以 目 由 选择 想 要 文 持 的 格式 ， 而 事实 
上 他 们 上 骨子里 就 不 可 能 达成 一 怪 。 表 5-1 展 示 了 目前 不 同 浏览 器 使 用 的 标准 。 


表 5-1 某 些 HTML5 浏 览 器 支持 的 标准 














格 xX 说 了 明 常用 扩展 名 MIME 类 型 

MP3 世界 上 最 流行 的 音频 格式 。 然 而 ， 许 可 费 让 Firefox 和 Opera 等 小 公 — .mp3 audio/mp3 
司 敬 而 远 之 

Ogg Vorbis 免费、 开放 的 标准 ， 能 够 提供 高 质量 的 压缩 音频 ， 可 以 与 MP3 媲 Ogg audio/ogg 

WAV 未 加 工 数 字音 频 的 初始 格式 。 由 于 未 经 压缩 ， 所 以 体积 奇 大 , 大 多 wav audio/wav 
数 情况 下 不 适合 Web 

H.264 视频 压缩 的 行业 标准 , 特别 适合 高 清晰 度 视频 。 广泛 应 用 于 消费 设 .mp4 video/mp4 


备 〈 如 蓝光 播放 器 和 便 推 式 摄像 机 ) 、Web 分 享 站 点 (如 YouTube 
和 Vimeo) 和 和 Web 插件 (如 Flash 和 Siverlight) 

Ogg Theora 免费 、 开 放 的 视频 标准 ， 出 自 Vorbis 音 频 标 准 的 制定 者 之 手 。 品 质 -ogv video/ogg 
和 性 能 不 及 H.264， 但 可 以 满足 大 多 数 人 的 需要 
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(EE) 


TE x 说 BH 常用 扩展 名 MIME 类 型 
WebM 了 最 新 的 视频 格式 ，Google 在 买 下 VP8 之 后 ， 将 其 改 为 免费 标准 。 webm video/webm 


有 评论 指出 , 其 品质 尚 不 如 H.264, 而 且 可 能 牵涉 其 他 人 的 专利 ， 
因此 将 来 或 许 会 5 发 诉讼 。 无 论 如 何 ，WebM 最 有 可 能 成 为 将 来 
的 开放 视频 格式 





表 5-1 中 也 列 出 了 媒体 文件 应 有 的 扩展 名 。 为 什么 扩展 名 很 重要 ?回答 这 个 问题 ， 必 须 认识 
到 一 个 视频 文件 实际 上 有 三 个 标准 参与 其 中 。 首 先 ,也 是 最 明显 的 ， 就 是 视频 编 解 码 器 ,用 于 把 
视频 压缩 为 数据 流 (包括 H.264、Theora 和 WebM )。 其 次 是 音频 编 解 码 器 ， 利 用 相关 的 标准 压缩 
一 或 多 个 音频 文件 。( 例如 ，H.264 一 般 使 用 MP3， 而 Theora 则 使 用 Vorbis。) 第 三 是 容器 的 格式 ， 
规定 了 如 何 把 视频 、 音 频 、 摘 述 性 信息 以 及 静态 图 片 和 字幕 等 填充 物 组 合 到 一 起 。 一 般 来 说 , x 
件 的 扩展 名 表示 容器 的 格式 。 因 此 ，.mp4 意 味 着 MPEG-4 容 器 ，.ogv 表 示 Ogg 容 器 。 

比较 微妙 的 地 方 在 这 里 : 多 数 容 硕 格式 都 文 持 一 些 不 同 的 视频 和 音频 标准 。 例 如 ， 流 行 的 
MatroskaZ£s& ( .mkv ) 可 以 包含 H.264 或 Theora 编 码 的 视频 。 考虑 到 不 让 你 的 脑袋 疼 得 裂 开 , 表 5-1 
针对 每 种 视频 格式 给 出 了 一 种 最 常用， 同时 也 是 在 Web 上 获得 了 最 可 笔 文 持 的 容 需 格式 。 

表 5-1 中 也 列 出 适当 的 MIME 类 型 ， 这 些 在 配置 Web 服 务 右 的 时 候 有 用 。 如 果 不 小 心 用 错 了 
MIME 类 型 ， 那 么 浏览 右 可 能 就 会 硕 固 地 拒绝 播放 本 里 好 好 的 媒体 文件 。( 要 是 你 还 不 太 明 白 什 
么 是 MIME 类 型 ， 如 何 配置 ， 可 以 参考 下 一 市 的 内 容 。) 


5.3.2 浏览 器 对 媒体 格式 的 支持 情况 


除非 我 们 知道 浏览 融 文 持 哪 些 格 式 ， 否 则 世界 上 的 格式 再 多 对 我 们 也 没有 意义 。 表 5-2 列 出 
了 不 同 浏览 器 对 不 同音 频 格式 的 文 持 情况 , 表 5-3 展 示 了 这 些 浏 览 硕 对 不 同 视频 格式 的 文 持 情 况 。 


表 5-2 ”浏览 器 对 HTML5 音 频 格 式 的 支持 情况 
































IE Firefox Chrome Safari Opera Safari iOS Android 
MP3 9 s 5 3.1 = 3 一 
Ogg Vorbis 一 3.0 5 Ei 10.5 一 — 
WAV = 3.6 8 3.1 10.5 = = 


X5-3 ”浏览 器 对 HTML5 视 频 格式 的 支持 情况 


IE Firefox Chrome Safari Opera Safari iOS Android 
H.264 Video 9 - . 3.1 一 4^ 23 
Ogg Theora 一 3.5 5 — 10.5 一 — 
WebM ui 4 6 一 10.6 一 2.3 








* Chrome 目 前 是 支持 这 个 标准 的 ， 但 为 了 更 好 地 推广 WebM， 已 经 宣布 将 来 会 取消 这 项 支持 。 
** JOS 3.Xx 文 持 视频 ， 但 Safari 浏 览 锅 中 存在 一 些微 小 的 视频 方面 的 bug。 例 如 ， 设 置 poster 属 性 (参见 $.2.2 节 ) 会 导 
致 视频 无 法 播放 。 
*### JE 将 来 会 文 持 WebM， 但 要 求 计算 机 用 户 自己 安装 编 解码 需 。 
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移动 设备 上 的 浏览 带 也 有 不 同 的 支持 问题 。 痛 先是 存在 一 些 怪异 的 问题 。 比 如 , 像 日 动 播放 
和 循环 这 样 的 功能 , 可 能 会 不 被 文 持 , 而 有 些 设备 可 能 会 用 专门 的 播放 融 ( 而 不 是 在 网 页 容 带 中 ) 
播放 退 体 文件 。 更 重要 的 是 ,针对 移动 设备 进行 视频 编码 时 ， 斥 才 可 以 小 一 些 ， 而 且 质 量 也 可 以 
不 必 太 高 。 





提示 ”这 里 有 一 个 经 验 法 则 ,如 果 你 想 让 视频 能 在 移动 设备 上 播放 , 那 就 应 该 使 用 H.264 Baseline 
Profile ( 而 非 Hight Profile ) 编码 。 对 于 iPhone 和 Android 手 机 , 视频 尺寸 不 必 超 过 640 x 480 
(如果 还 要 支持 黑莓 手机 ， 那 么 不 必 超 过 480 x 360 ). 很 多 编码 软件 (参见 后 面 的 附注 栏 ) 
都 有 针对 移动 视频 进行 优化 的 预 设 选项 。 


理解 MIME 类 型 

MIME 类 型 ( 有 了 时候 也 叫做 内 容 类 型 ) 就 是 一 小 段 信息 ， 表 示 某 种 Web 资 源 的 内 容 类 型 。 
例如 ， 网 页 的 MIME 类 型 就 是 text/html。 

Web 服 务 器 在 把 某 个 资源 发 送 给 浏览 器 的 时 候 ， 会 在 前 面 发 送 MIME 类 型 。 比 如 ， 假 设 浏 
览 器 请 求 了 一 个 网 页 SuperVideoPlayerPage.html， 服务 器 会 发 送 text/html 这 个 MIME 类 型 、 其 他 
一 些 相 关 信 息 和 实际 的 文件 内 容 。 浏 览 器 接收 到 该 MIME 类 型 后 ， 就 知道 该 如 何 处 理 后 面 的 内 
容 。 这 样 ， 就 不 必 根 据 文件 的 扩展 名 或 其 他 信息 去 判断 了 。 

对 于 常见 的 文件 类 型 ( 如 HTML 页 面 和 图 片 ), 不 必 担 心 其 MIME 类 型 ， 因 为 Web 服 务 器 都 
能 够 适当 地 处 理 。 但 菜 些 Web 服 务 器 或 许 没有 配置 音频 和 视频 的 MIME 类 型 。 这 就 是 问题 了 ， 
如 果 Web 服 务 器 在 发 送 媒 体 文件 时 发 错 了 MIME 类 型 ， 会 导致 浏览 器 不 知 所 措 。 而 结果 一 般 就 
是 不 能 播放 。 

为 避免 这 个 问题 ， 务 必要 按照 表 S$-1 列 出 的 MIME 类 型 正确 地 配置 Web 服 务 器 ， 同 时 也 不 要 
总 了 给 自己 的 音频 和 视频 文件 使 用 正确 的 扩展 名 。( 光 正确 配置 MIME 类 型 还 不 够 ， 还 得 使 用 
正确 的 扩展 名 。 因 为 Web 服 务 器 要 成 对 儿 使 用 这 两 方面 信息 。 比 如 ， 把 .mp4 文 件 配 置 为 
video/mp4 这 个 MIME 类 型 后 ， 却 在 视频 文件 上 使 用 了 .mpFour 作 为 扩展 名 ， 那 Web 服 务 器 就 不 
知道 你 想 让 它 做 什么 了 。 ) 

配置 MIME 类 型 并 不 难 ， 但 实际 的 步骤 却 因 Web 托 管 公司 (或 者 如 果 你 自己 管理 自己 的 服 
务 器 ， 就 是 你 的 Web 服 务 器 软件 ) 而 异 。 如 果 网 站 托管 公司 使 用 流行 的 cPanel 工 具 ， 可 以 找到 
名 为 MIME Types 的 图 标 ， 单 击 之 后 就 可 以 看 到 如 图 $-4 所 示 的 页 面 。 如 果 你 还 有 什么 疑问 ， 请 
联系 托管 公司 寻求 帮助 。 
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m SO 图 5-4， 在 这 里 我 们 添加 了 一 个 新 
一 -a a m) 的 MIME 类 型 ， 以 支持 H.264 视 频 
MIME Type: video/mpà © ”文件 .如 果 你 的 网 站 已 经 配置 好 了 

ee o 这 个 MIME 类 型 ， 那 你 就 不 必 多 此 


Tip: separate multiple extension types with a space 


一 举 了 


User Defined MIME Types 
EXTENSION(S) 


Systcm MIME Typcs 




















5.3.3 多 种 格式 : 如 何 讨 好 每 一 款 浏览 器 


面 对 这 些 格式 上 的 差异 ， 老 实 巴 交 的 Web 开 发 人 员 何 去 何 从 ”可惜 的 是 ,没有 哪个 音频 或 视 
频 格 式 可 以 在 所 有 浏览 器 中 播放 。 假 如 你 想 支 持 所 有 浏览 右 ( 当然 应 该 )， 就 需要 准备 多 种 格式 
的 媒体 文件 。 甚 至 ， 你 还 得 准备 Flash 格 式 的 文件 ， 以 全 那些 不 支持 HTML5 的 浏览 磋 ( 如 IE8 ) 用 
户 能 正常 听 到 或 看 到 。 

好 在 ，<audio> 和 <video> 元 泰 都 支持 后 备 机 制 ， 而 Web 社 区 的 老大 哥们 也 为 我 们 弥补 了 很 多 
缺失 。 当 然 , 有 点 令 人 不 丈 的 是 ， 对 于 每 个 媒体 文件 ， 至少 都 要 编码 两 次 一 一 既 浪 费时 间 ， 叉 浪 
费 CPU 和 磁盘 空间 。 

开始 制作 多 版 本 的 媒体 文件 之 前 ， 首 先 要 确定 如 何 文 持 非 HITMLS 浏 览 堪 。 一 般 来 说 ， 我 们 
有 两 个 基本 的 选择 。 

O 主 选 Flash，HTML5 作 后 备 。 也 就 是 给 所 有 人 都 提供 Flash 格 式 的 文件 ， 只 有 未 安装 Flash 

的 人 看 不 到 。 这 种 办 法 适合 那些 已 经 利用 成 熟 的 Flash 视 频 播放 恬 在 自己 的 网 站 上 展示 视 
频 ， 但 又 不 想 失 去 记 ad 和 iPhone 用 户 的 人 。 

O 主 选 HTML5，Flash 作 后 备 。 也 就 是 给 所 有 人 都 提供 HTML5 视 频 (或 音频 )， 而 那些 旧版 
本 浏览 器 的 用 户 可 以 看 到 Flash 内 容 。 选 择 这 种 方式 的 话 ， 还 需要 确定 支持 哪些 格式 。 如 
果 用 户 的 浏览 幕 支 持 HTML5， 但 不 支持 你 提供 的 格式 ， 他 们 也 能 看 到 Flash 内 容 。 这 是 面 
向 未 来 的 一 种 方式 ， 但 要 求 必须 容忍 HTML5 音 频 和 视频 上 日 前 的 限制 (参见 5.2.1 节 )。 

接 下 来 几 市 ， 我 们 按照 第 二 种 方式 尝试 一 下 。 换 名 话说， 我 们 要 尺 可 能 使 用 HTML5 格 式 。 
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5.34 ”使 用 <source> 元 素 


要 想 支 持 多 各 格式， 第 一 步 束 要 从 <video> 或 caudio> 元 素 中 删除 src 属 性 ， 人 然后 枫 套 一 组 
<Ssource> 元 素 。 以 下 是 一 个 <audio> 元 素 舰 套 <source> 元 系 的 例子 


«audio controls» 
«source src-"rubberduckies.mp3" type-"audio/mp3"» 
«source src-"rubberduckies.ogg" type-"audio/ogg'» 
«/audio» 


在 此 ,一 个 <audio> 元 系 通 套 了 两 个 Csource> 元 系 ， 每 个 <source> 元 又 都 指 回 一 个 不 同 的 音频 
文件 。 浏览 帮会 选择 播放 第 一 个 它 所 支持 的 文件 。Firefox 和 Opera 会 播放 rubberduckies.ogg， 而 IE、 
Safari 和 Chrome 会 播放 rubberduckies.mp3。 

理论 上 讲 , 浏览 万 可 以 通过 下 载 部 分 文件 内 容 来 判断 它 是 否 文 持 相应 的 格式 。 但 更 好 的 做 法 
则 是 像 这 里 一 样 使 用 type 属 性 提供 正确 的 MIME 类 型 信息 (参见 上 一 节 )。 如 此 一 来 , 浏览 锅 就 只 
会 下 载 它 认为 自己 能 够 播放 的 文件 了 了。( 要 了 解 正确 的 MIME 类 型 ， 请 参考 表 5-1。 ) 

同样 的 做 法 也 适用 于 <video> 元 素 。 下 面 这 个 例子 使 用 了 两 个 相同 的 视频 文件 ， 但 一 次 用 
H.264 编 码 ， 一 次 用 Theora 编 但 : 


«video controls width= 700" ”height= 400 > 
«source src-"beach.mp4" type-"video/mp4"» 
«source src-"beach.ogv" type-"video/ogg'» 

«/video» 


这 个 例子 有 一 些 新 的 东西 。 在 使 用 多 个 视频 格式 时 ， 应 该 把 H.264 编 码 的 文件 放 在 前 头 。 否 
则 ,运行 OS 3.x 的 iPad 无 法 正确 播放 该 文件 。(1iOS 4 已 经 修复 了 这 个 问题 , 但 将 H.264 格 式 的 文件 
放 在 前 头 总 没有 坏处 。) 




















注意 ”浏览 器 认为 它 支持 某 种 类 型 的 音频 或 视频 文件 ， 并 不 意味 着 它 一 定 能 播放 该 文件 。 例 如 ， 
你 可 能 会 对 自己 的 文件 使 用 不 常见 的 高 比特 率 , 或 者 在 茶 种 常用 的 容器 格式 中 使 用 一 种 生 

个 的 编 解码 器 。 要 解决 这 个 问题 ， 可 以 通过 type 属 性 提供 类 型 和 编 解码 器 信息 ， 但 这 样 可 

能 会 导致 标记 混乱 。HTMLS 对 此 给 出 了 详细 的 描述 ， 请 参见 http:/tinyurl.com/3aqSnk3 。 


Y IÉ y 


那 应 该 准备 儿 种 视频 格式 呢 ? Tur EAHA, XUSH264, TheorafllFlash/r4& (下 一 市 
讨论 )。 为 了 保证 品质 ， 可 以 用 WebM 蔡 代 Theora。 这 样 会 导致 版 本 稍微 老 一 些 的 Firefox 和 Opera 
无 法 播放 ， 好 在 这 些 老 版 本 并 不 多 。 实 在 不 行 就 多 编 一 次 码 喘 ， 把 H.264、WebM 和 Theora 格 式 都 
准备 好 ( 顺序 也 是 这 样 )。 把 WebM 放 在 Theora 前 头 ,， 可 以 让 支持 这 两 种 格式 的 浏览 器 播放 质量 更 
好 的 视频 。 

如 果 你 的 想法 更 大 胆 , 那 可 以 创建 一 个 同时 支持 如 面 和 移动 设备 的 视频 页 面 。 这 样 的 话 , 不 
仅 要 考虑 H.264 和 Theora 视 频 格 式 ， 还 要 考虑 为 硬件 配置 不 高 、 上 网 速度 慢 的 设备 创建 一 个 罕 带 
宽 版 本 。 为 确保 移动 设备 播放 轻 量 级 视频 ， 揭 面 浏览 需 播放 高 品质 视频 ， 还 要 用 到 8.4 节 将 介绍 
的 媒体 查询 。 
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5.3.5 以 Flash 作 后 备 


有 中 以 来 的 所 有 浏览 带 在 对 征 不 认识 的 标签 时 行为 部 一 样 : 视而不见 。 比 如 ， 假 设 IE8 遇 到 
本 耻 生 的 <video> 开 始 标 签 ， 它 只 会 “一 突 而 过 ”， 根 本 不 去 检查 其 src 属 性 。 然 而 ,浏览 瘟 不 会 
忽略 不 认识 的 元 系 中 包含 的 内 容 ， 这 可 是 一 个 非 第 重要 的 差 寞 。 换 名 话说， 对 于 下 面 的 标记 : 


«video controls width="400" height= 300 > 
«source src-"discoParty.mp4" type="video/mp4"> 
«source src-"discoParty.ogv" type-"video/ogg'» 
«p»We like disco dancing.«/p» 

«/video» 


ASSCREHTMLSRBSTU V8, 8r ERA : 

«p»We like disco dancing.«/p» 

这 也 就 是 我 们 所 说 的 后 备 内 容 。 利 用 这 种 后 备 方式 ,可 以 癌 旧 版 本 浏览 带 用 户 提 供 相 应 的 说 
明 ， 而 不 会 让 人 感到 迷惑 不 解 。 











编码 媒体 文件 5 
现在 , 你 应 该 知道 自己 想 使 用 哪些 格式 了 。, 但 你 不 一 定 知 道 怎么 把 媒体 文件 转换 成 这 些 格 
式 。 别 担心 ， 有 很 多 工具 可 以 帮 你 。 有 的 工具 可 以 一 次 转换 很 多 文件 ， 有 的 工具 则 以 产 出 高 品 
质 内 容 著称 (一 分 钱 一 分 货 )， 而 有 的 工具 是 在 强大 的 Web 服 务 器 上 执行 转换 ， 不 用 等 待 。 关 
键 是 根据 目 己 的 具体 需求 ， 找 到 适合 你 的 编码 工具 。 
以 下 向 大 家 推荐 几 种 编码 工具 
音频 编辑 器 。 如 果 你 起 编辑 WAV 文 件 ， 并 将 它们 保存 为 MP3 或 Vorbis 格 式 ， 只 要 找 一 个 
简单 的 音频 编辑 器 即 可 。 我 推荐 Audacity ( http://audacity.sourceforge.net/ )， 这 是 一 个 免 
ee 不 过 ， 要 转换 成 MP3， 还 要 另 安 装 LAME MP3 编 
A525 (http://lame.buanzo.com.ar/ )。 另 外 ，Goldwave ( http://www.goldwave.com/ ) 也 是 
一 个 类 似 的 编辑 器 ， 虽 然 不 免费 ， 但 价格 也 只 是 象征 性 的 。 
Q Miro Video Converter。 这 个 自由 、 开 源 的 程序 有 Windows 和 Mac OS X 版 ， 可 以 将 任何 
视频 文件 转换 成 WebM、Theora 或 HH.264， 而 且 还 针对 iPad、iPhone 和 Android 设 备 预 设 了 
不 同 大 小 和 格式 ,唯一 不 足 的 地 方 就 是 , 它 没有 提供 高 级 调 校 选项 ,无 法 控制 编码 过 程 。 
要 试 试看 ? 访问 http://www.mirovideoconverter.com。 
口 Firefogg。 这 是 一 个 Firefox 质 件 ( http://firefogg.org/ )， 可 以 创建 Theora 或 WebM 视 频 文 
^t, 与 Miro 相 比 ， 它 提供 了 更 多 选项 , 而 且 是 在 你 的 浏览 器 中 运行 (所 有 工作 都 在 本 地 
完成 ， 不 会 涉及 Web 服 务 器 ). 
口 HandBrake。 这 是 一 个 开源 、 多 平台 的 软件 ( http://handbrake.fr/ )， 能 把 多 种 格式 转换 
为 H.264 (及 其 他 几 种 最 新 的 格式 )。 
口 Zencoder。 这 是 一 种 专业 的 、 能 与 你 的 网 站 集成 工作 的 媒体 编码 服务 。Zencoder 
( http://zencoder.com/ ) 能 从 Web 服 务 器 上 下 载 视频 文件 、 将 它们 转换 成 你 需要 的 所 有 格 
式 和 比特 率 , 为 转换 后 的 文件 命名 并 分 门 别 类 地 放 在 相应 的 位 置 下 。 比 较 大 的 视频 网 站 
可 以 与 Zencoder 合 作 ， 谈 一 个 合适 的 按 月 付费 价格 。 
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注意 ”支持 HTML5 音 频 的 浏览 器 即使 不 能 播放 媒体 文件 , 也 会 忽略 后 备 内 容 。 例 如 , 2R Firefox 
遇 到 了 一 个 指向 H.264 格 式 的 文件 但 未 提供 Theora 格 式 的 <video> 元 素 , 它 就 会 显示 一 个 带 
X 的 视频 容器 (如 图 $-3 所 示 )， 但 不 会 显示 后 备 内 容 。 


知道 了 乍 么 添加 后 备 内 容 后 ， 接 下 来 承 要 考虑 添加 什么 内 容 了 。 后 备 内 容 可 以 是 一 句 话 ， 比 
如 “你 的 浏览 硕 不 文 持 HTML5S 视 频 ， 请 升级 浏览 硕 ”。 但 网 站 访客 认为 这 种 方式 极其 不 礼 狗 ， 要 
是 让 他 们 看 到 这 人 句 话 ， 你 就 永远 跟 他 们 无 绿 了 。 

比较 合适 的 后 备 内 容 是 另 一 段 可 以 播放 的 视频 ， 也 就 是 要 使 用 一 个 普通 的 非 HIMLS 页 面 。 
比如 ， 可 以 使 用 YouTube 视 频 窗 口 ， 但 必须 遵守 YouTube 的 规定 〈 视频 长 度 不 能 超过 15 分 钟 ， 而 
日 不 能 包含 令 人 反感 和 侵犯 版 权 的 内 容 ) 准备 好 内 容 后 ,可 以 先 上 传 到 YouTube， 上传 时 选择 一 
种 最 佳 格 式 ， 而 YouTube 会 将 其 重新 编码 成 它 文 持 的 格式 。 还 没有 在 YouTube 上 传 过 视频 ? wA 
看 这 里 吧 : http;//upload.youtube.com/my videos upload 。 

另 一 种 可 能 是 使 用 Flash 视 频 播 放 需 。( 如 果 你 想 展 示 音 频 ， 就 是 Flash 音 频 播 放 需 。) 各 式 各 
样 的 Flash 视 频 播 放生 大多 了 , 其 中 很 多 都 是 免费 的 , 至 少 非 商 业 用 途 不 收费 。 而且， 大 多 数 Flash 
视频 播放 器 还 都 支持 HTML5 视 频 中 常用 的 H.264 格 式 。 

下 面 这 个 例子 展示 了 把 流行 的 Flowplayer ( http://flowplayer.org/ ) 插入 到 HTML5 <video> JL% 
中 的 标记 : 

«video controls width-" 700" height-"400"» 


«source src-"beach.mp4" type-"video/mp4"» 
«source src-"beach.ogv" type-"video/ogg'» 














«object id-"flowplayer" width-"700" height-"400" 
data-"flowplayer-3.2.7.Swf" 
type-"application/x-shockwave-flash"» 

«param name="movie" values" flowplayer-3.2.7.swf'» 
«param name="flashvars" value-'config-("clip":"beach.mp4")'» 
</object> 
</video> 


代码 中 的 粗 体 部 分 是 浏览 器 传递 给 Flowplayer 的 参数 ,包含 视频 文件 的 名 字 。 请 注意 ,虽然 
这 个 例子 考虑 了 三 种 可 能 的 情况 ( H.264 格 式 的 HTML5 视 频 、Theora 格 式 的 HTML5 视 频 和 H.264 
格式 的 Flash 视 频 ), 但 只 需要 两 个 视频 文件 ， 减少 了 编码 工作 量 。 图 5-5 展 示 了 这 个 例子 的 结果 。 























提示 虽然 在 Flash 播 放 器 中 重用 H.264 视 频 很 方便 , 但 这 种 方式 也 不 是 没有 缺点 。Flash 9.0.115.0 
之 前 的 版 本 是 不 支持 H.264 格 式 的 。 因 此 ， 如 果 浏 览 器 中 安装 的 Flash 版 本 比较 老 , 就 有 可 
能 播放 不 了 H.264 格 式 的 视频 ， 除 非 升 级 Flash 质 件 。 为 了 避免 这 种 情况 ， 可 以 选择 Flash 
Video Format ( .flv )， 这 个 格式 保证 在 所 有 Flash 版 本 中 都 能 正常 播放 ， 只 不 过 就 得 再 多 编 
m~ T o 


注 1: 如 果 打 不 开 这 个 链接 ， 读 者 也 可 以 参考 http://www.youku.com/v/upload。( 译 者 注 ) 
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rad 图 5-5: 同一 个 视频 ， 以 三 种 方式 提供 : 对 
二 IE9( 上 )、Firefox ( 中 ) 使 用 HTML 视频， 
对 IE7 ( 下 ) 使 用 Flash 视 频 


<] - je VideoWithFlashFallbackhtm| O~ RX | Æ Vidco | 

















弛 | 


L VideoWithFlachFallhack.html 














e Video - Windows Internet Explorer 


2 全 |] 
EK j* e http:;//reboot-me.com/VideoWithFlashfallbacl ~ | X || Google 





w 4 E video -D æ ~ i Page v (Tess — 
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一 种 形式 的 后 备 内 容 ， 比 如 一 个 指 癌 视频 文件 的 下 载 链 接 ， 点击 可 以 在 外 部 程序 中 打开 。 这 样 的 
内 容 要 放 在 Flash 内 容 后 面 ， 但 仍然 在 <object> 元 系 内 : 


«video controls width="700" height= 400 > 
«source src-"beach.mp4" type="video/mp4"> 
«source src-"beach.ogv" type-"video/ogg'» 





«object id-"flowplayer" width-"700" height-"400" 

data-"http: //releases.flowplayer.org/swf/flowplayer-3.2.7.swf" 
type-"application/x-shockwave-flash"» 

«param name="movie" value-"beach.mp4"» 


«img src-"beach thumbnail.jpg" alt-"A lazy day at the beach > 
«p»Your browser does not support HTML5 video or Flash.«/p» 
«p»You can download the video in «a href-"beach.mp4"»MP4 H.264«/a» 
or «a href-"beach.ogv"»0gg Theora«/a» format.«/p» 
</object> 
</video> 


假如 你 想 主 要 提供 Flash 视 频 , 以 HIMLS 作 为 后 备 (〈 而 不 是 主 选 HIML5 ， 以 Flash 作 为 后 备 ), 
那 在 这 个 例子 上 简单 调整 一 下 就 好 。 首 先是 <object> 元 素 , 然后 在 其 中 骸 套 <video> 元 素 , 最 后 是 
</object > 标签 结束 。 这 种 情况 下 ， 需 要 把 后 备 内 容 放 在 最 后 一 个 Csource> 元 素 之 后 : 


«object id-"flowplayer" width-"700" height-"400" 
data-"http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf" 
type-"application/x-shockwave-flash"» 

«param name="movie" value-"butterfly.mp4"» 




















«video controls width-"700" height-"400"» 
«source src-"beach.mp4" type-"video/mp4"» 
«source src-"beach.ogv" type-"video/ogg"» 


«img src-"beach thumbnail.jpg" alt= A lazy day at the beach» 
«p»Your browser does not support HTML5 video or Flash.«/p» 
«p»You can download the video in «a href-"beach.mp4"»MP4 H.264«/a» 
or «a href-"beach.ogv'»0gg Theora«/a» format.«/p» 
«/video» 
</object> 


一 般 来 说 ， 只 有 在 你 已 经 有 了 一 个 基于 Flash 的 网 站 ， 而 你 想 对 其 加 以 扩展 ， 使 其 文 持 iPad 
等 屯 末 设备 时 ， 才 需要 采用 这 个 方案 。 通 稼 ， 至 少 应 该 有 一 个 JavaScript 播 放 肯 ， 用 作 HTMLS 后 
备 。 这 个 播放 人 各 就 是 JW Player, 下载 地 址 是 http://www.longtailvideo.com/players/jw-flv-player。 


5.4 使 用 JavaScript 控制 播放 器 


到 现在 为 止 ， 我 们 介绍 了 一 些 基 础 知识 ， 也 知道 了 怎么 围绕 新 的 caudio> 和 <video> 元 素 拿 出 
合理 的 支持 方案 , 使 媒体 文件 不 仅 能 在 Flash 播 放 带 里 播放 ,而 且 能 在 更 多 的 网 页 中 和 直接 播放 。 这 
些 新 技术 还 是 能 派 上 用 场 的 。 
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如 果 只 谈 标 记 ， 那 么 利用 <audio> 和 <video> 也 就 只 能 做 那么 多 了 。 然 而 ， 这 两 个 元 素 都 有 一 
个 扩展 的 JavaScript 对 象 模型 ， 让 我 们 能 通过 代码 控制 播放 过 程 。 事 实 上 , 甚至 还 可 以 调整 一 些 细 
节 ， 比 如 播放 速度 。 这 些 功能 是 浏览 硕 标 准 的 音频 和 视频 播放 融 力 所 不 能 及 的 。 

好 了 ,， 接 下 来 的 几 和 ,我 们 通过 两 个 实际 的 例子 ,介绍 JavaScript 对 音频 和 视频 的 文 持 。 第 一 
个 例子 是 为 游戏 添加 音效 , 第 二 个 例子 将 创建 一 个 自 定义 的 视频 播放 器 。 最 后 ,我 们 还 将 讨论 几 
个 其 他 人 利用 HTML5 和 JavaScript 开 发 出 来 的 解决 方案 ， 包 括 可 换 肤 的 播放 顺和 无 障碍 字幕 。 











5.4.1 添加 音效 


通过 <audio> 元 素 并 不 是 只 能 播 歌曲 和 录音 ， 还 可 以 利用 它 播放 音效 。 这 一 点 使 其 特别 适合 
为 游戏 配乐 和 添加 首 效 。 

图 5-6 展 示 了 一 个 非 弟 简单 的 例子 ， 网 页 中 显示 者 可 交互 的 弹跳 球 动 画 。 在 第 6 草 学 习 
<canvas> 的 时 候 ， 我 们 再 介绍 这 个 例子 的 代码 。 现 在 ， 我 们 需要 考虑 的 是 怎么 为 它 配 上 合适 的 
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下 CAHTML5\Chapter05\SoundEffects.html O ~ C xl 3 S F 15-6; 这 个 页 面 在 国 布 元 素 上 运行 一 个 简单 的 动 
Bekk es 画 ， 单 击 按钮 可 以 添加 新 的 弹跳 球 ( 新 球 会 下 落 ， 
并 不 断 在 画布 区 域内 弹跳 ) 。 另 外 ， 用 鼠标 单 击 

可 以 改变 球 的 弹跳 方向 

















| Add Ball | Clear Canvas 





Ball Size: 15 -] Connect Balls 


























实际 上 ， 这 个 例子 组 合 了 背景 音乐 和 音效 。 添 加 背景 音乐 很 简单 ， 只 要 在 页 面 中 加 上 一 个 不 
可 见 的 <audio> 元 素 即 可 


«audio id-"backgroundMusic" loop» 
«source src-"TheOwlNamedOrion.mp3" type-"audio/mp3"» 
«source src-"TheOwlNamedOrion.ogg" type-"audio/ogg"» 
«/audio» 


5.4 使 用 Javascript 控制 播放 器 | 133 





我 们 没有 给 音频 播放 器 添加 autoplay 或 controls 属 性 ， 因 此 开始 的 时 候 没 有 声音 ， 也 看 不 到 
播放 希 界 面 。 不 过 ， 倒 是 添加 了 一 个 loop 属 性 ,这 样 只 要 一 开始 播放 ， 就 会 不 断 反 复 播放 。 为 了 
控制 声音 的 播放 ， 需 要 使 用 两 个 音频 (或 视频 ) 对 象 的 方法 : play() 和 pause()。 怎 么 没有 停止 
播放 的 方法 呢 ? 的 确 没 有 ， 要 俘 止 播放 ， 可 以 先 暂 停 视频 ， 然 后 将 其 currentTime 属 性 重 置 为 0， 
即 下 次 播放 会 从 头 开 始 。 

了 解 了 这 些 以 后 ， 就 可 以 在 添加 第 一 个 球 时 开始 播放 痛 景 音乐 了 ， 很 价 单 : 


var audioElement = document.getElementById("backgroundMusic"); 
audioElement.play(); 


在 清除 画布 的 时 候 停 止 播放 育 景 音 乐 同 样 很 价 单 : 
var audioElement = document.getElementById("backgroundMusic"); 


audioElement.pause(); 
audioElement.currentTime = 0; 


前 面 介 绍 过 ， 同 时 播放 多 少 个 音频 文件 是 没有 限制 的 。 因 此 ， 在 背景 音乐 开始 播放 的 同时 ， 
我 们 可 以 再 琢磨 一 下 怎么 添加 更 好 玩 的 音效 。 
对 这 个 例子 来 说 , 小 球 每 次 从 地 面 或 墙 上 弹 开 的 时 候 , 都 要 播放 弹 复 突然 释放 的 “ 吸 吗 ” 声 。 
为 了 增强 趣味 性 ， 我 们 使 用 了 几 种 不 同 的 音效 。 当 然 , 我 们 这 里 只 是 模仿 真实 的 游戏 ， 如 果 是 真 
实 的 游戏 ， 灵 怕 要 集成 十 几 个 其 至 更 多 声 首 文件 。 
实现 上 述 设计 的 方案 有 很 多 ,但 并 不 都 可 行 。 比 如 ， 可 以 再 添加 一 个 caudio> 元 系 ， 用 于 播 
放 音 效 。 然 后 ， 每 次 小 球 撞击 反弹 时 ， 虱 通过 修改 其 src 属 性 加 载 一 个 新 音频 文件 。 这 个 方案 有 
两 个 问题 。 首 和 完 ， 每 个 caudio> 元 系 每 次 只 能 播放 一 个 声 首 文件 ， 因 此 如 朵 有 多 个 球 连 续 反 弹 ， 
那 要 人 么 不 播放 紧 接着 的 、 重 三 的 声音 ， 要 么 立即 停止 前 一 个 音效 ， 加 载 并 播放 后 一 个 。 其 次 , E 
新 设置 Src 属 性 会 强迫 训 览 希 请 求 音 频 文件 。 昌 然 有 些 浏览 带 能 很 快 加 载 完 新 音频 ( 如 果 首 频 已 
经 在 缓存 中 了 ), 但 IE 不 行 。 结 灯 ， 就 是 首 效 会 延迟 一 一 球 都 弹 开 半 秒 钟 ， 首 效 才 播 放 。 
更 好 的 方案 是 使 用 一 组 <caudio> 元 素 ， 每 个 播放 一 种 音效 。 以 下 就 是 示例 代码 : 
«audio id-"audio1"» 
«source src-"boingi.mp3" type-"audio/mp3"» 
«source src-"boingi.wav" type-"audio/wav"» 
«/audio» 
«audio id-"audio2"» 
«source src-"boing2.mp3" type-"audio/mp3"» 
«source src-"boing2.wav" type-"audio/wav"» 
«/audio» 
«audio id-"audio3"» 
«source src-"boing3.mp3" type-"audio/mp3"» 


«source src-"boing3.wav" type-"audio/wav"» 
«/audio» 















































注意 ”这 里 的 3 个 caudio> 元 素 使 用 了 不 同 的 音频 文件 ， 但 这 并 不 是 必须 的 。 比 如 ， 你 可 以 使 用 
同一 个 音频 文件 ， 而 为 了 支持 重合 音效 ， 可 能 还 得 使 用 三 个 音频 播放 器 。 
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发 生 碰 撞 反 弹 时 ，JavaScript 代 码 会 调用 一 个 名 为 boing() 的 目 宇 义 困 数 。 这 个 图 数 会 按照 顺 
序 取得 下 一 个 <audio> 元 系 ， 然 后 播放 声音 。 
以 下 就 是 实现 音效 播放 的 代码 : 


// 记 录 《<audio> 元 素 的 个 数 
var audioElementCount = 3; 





// 记 录 当 前 播放 的 <audio> 元 素 
var audioElementIndex = 1; 


function boing() { 
// 取 得 循环 列表 中 的 下 一 个 <audio> 元 素 
var audioElementName = "audio" + audioElementIndex; 
var audio - document.getElementById(audioElementName); 


ME 25 3 C 
audio.currentTime = O; 
audio.play(); 


// 把 计数 器 更 新 为 下 一 个 <audio> 元 素 
if (audioElementIndex == audioElementCount) { 
audioElementIndex - 1; 


else { 
audioElementIndex += 1; 


j 
} 


提示 “要 体验 一 下 混合 了 背景 音乐 和 弹跳 球 音效 的 页 面 , 可 以 访问 http://www.prosetech.conyhtml5。 





这 个 例子 能 够 正 稼 运行 , 可 如 果 你 想 实 现 更 大 范围 的 音效 怎么 办 ? 最 价 单 的 方案 就 是 为 每 个 
音效 单独 创建 一 个 隐藏 的 <audio> 元 系 。 如 果 不 行 ， 还 可 以 动态 设置 已 有 “<audio> 元 素 的 src 属性 。 
甚至 ， 可 以 像 下 面 这 样 动态 地 创建 新 audio> 元 素 : 











var audio = document.createElement(" audio"); 
audio.src = "newsound.mp3"; 
Bie E fn] PR: 


var audio = new Audio("newsound.mp3"); 

不 过 ， 这 两 种 方式 部 存在 问题 。 痛 和 完 ， 必 须 在 播放 首 频 之 前 设置 src 属 性 。 否 则 就 会 造成 音 
效 延 从 ， 在 正中 特别 明显 。 其 次 ， 必 须知 道 浏 览 带 文 持 的 首 频 格式 , 这样 才 能 设置 正确 的 文件 类 
型 。 为 此 ， 就 得 使 用 笨拙 的 canPlayType() 方 法 。 给 这 个 方法 传人 首 频 或 视频 的 MIME 类 型 ， 它 会 
告诉 你 浏 览 硕 是 否 能 播放 该 格式 一 一 基本 上 准确 。 如 果 浏 览 融 不 文 持 传人 的 类 型 , canPlayType() 
方法 会 返回 空 字 符 串 , 如果 该 方法 认为 浏览 如 可 以 , MRE “probably”, 如 末 它 希望 浏览 一 可 以 ， 
则 返回 “maybe”, 但 这 些 虱 不 能 保证 真 的 可 以 播放 。 之 所 以 会 有 判断 失误 的 时 候 , 主要 是 因为 有 
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LRA, 但 也 可 能 不 支持 其 编 公 设置 。 

大 多 数 开 发 人 员 喜 欢 下 面 这 种 编码 方式 ， 即 只 要 canplayType() 不 返回 空 学 符 串 ， 就 说 明 浏 
览 郁 文 持 相应 的 格式 : 


if (audio.canPlayType("audio/ogg")) { 
audio.src = "newsound.ogg"; 











else if (audio.canPlayType("audio/mp3")) { 
audio.src = "newsound.mp3"; 


j 


5.4.2 ”创建 自 定 义 视频 播放 器 


使 用 JavaScript 操 作 <audio> 和 《video> 元 素 的 最 稼 见 理 由 ， 就 是 构建 目 己 的 播放 占 。 基 本 思想 
很 简单 ， 不 添加 controls 必 性， 但 有 播放 窒 口 ， 因 此 可 以 在 下 方 添 加 自己 的 播放 控件 。 最 后 ， 添 
加 JavaScript 代 人 码 ， 让 新 控件 发 挥 作用 。 图 5-7 展 示 了 一 个 例子 。 








OO | 图 5-7: 制作 自己 的 HTML5 视 频 播放 
fe 这 器 很 简单 ( 要 做 好 可 不 简单 ) 。 这 个 
€ Q | O file///C/HTML5/Chapter?52005/UglyPlayer.html v ag 例子 中 包含 标准 的 播放 控件 、 播 放 进 
World's Ugliest Video Player 度 条 和 其 他 一 些 按 钮 ， 展 示 了 
JavaScript 对 <video> 元 素 的 全 方位 控 

制 能 
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UPC A m 25 — EA BUTROPG EM. HRIS-TSUDE H Y OB BOTE. 


«button onclick-"play()"»Play«/button» 
«button onclick-"pause()"»Pause«/button» 
«button onclick-"stop() »Stop«/button» 


这 儿 个 按钮 会 触发 以 下 简单 的 函数 : 


function play() { 
video.play(); 


j 


function pause() { 
video.pause(); 


function stop() { 
video.pause(); 
video.currentTime - 0; 


) 

33 937] HS GP PE n] ANDRE VL, ERIE DMEPXplaybackRateL4 Pk ZR EGRE. fun, HE au 
playbackRate 设 置 为 2， 视 频 会 以 正 浓 速度 的 两 倍 播放 ， 不 过 由 于 有 音 高 校正 ， 所 以 音频 听 起 来 
正常 ， 只 是 速度 加 快 了 。 这 个 功能 对 于 快速 看 完 一 段 拖 省 的 培训 视频 是 很 有用 的 。 类 似 地 ， 把 
playbackRate 设 置 为 0.5， 会 导致 视频 比 正 常 速度 放 慢 一 半 播 放 ， 而 把 playbackRate 设 置 为 -1， 速 
度 不 变 ， 只 是 会 倒退 播放 一 一 在 有 些 浏 览 硕 中 ， 可 能 无 法 顺畅 地 实现 此 功能 : 

function speedUp() { 


video.play(); 
video.playbackRate - 2; 




















function slowDown() 1 
video.play(); 
video.playbackRate = 0.5; 


function normalSpeed() { 
video.play(); 
video.playbackRate - 1; 





Gem GUHEZARWUEML.U6, JEHEZEBUERiUSCUR EOGLAEPT EUCERJ«div»7658 : 
«div id-"durationBar"» 


«div id-"positionBar"»«span id-"displayStatus"»Idle.«/span»«/div» 
</div> 


提示 “播放 进度 条 是 非常 适合 使 用 <pTogTess> 元 素 (参见 4.5.2 节 ) 实现 的 功能 。 但 是 ， 由 于 支持 


<pIogTess> 元 素 的 浏览 器 有 限 一 一 比 支持 HTMLS 视 频 的 浏览 器 少 得 多 ， 因 此 这 个 例子 就 
使 用 两 个 div> 来 实现 类 似 的 功能 。 
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外 面 的 <div> 元 素 (durationBar ) 显示 实心 边框 ,勾勒 出 进度 条 的 整个 轮廓 ， 表 示 视 频 的 完 
整 播放 时 间 。 内 部 的 <div> 元 素 〈positionBar ) 表示 当前 播放 的 时 间 点 ， 视 觉 上 就 是 在 黑色 方 框 
中 项 入 蓝 色 。 最 后 ， 内 部 div> 中 的 <span> 元 素 保存 看 状态 文本 ， 用 于 在 播放 期 间 显 示 当 前 时 间 
A (P) 
用 于 为 这 两 个 长 条 添加 样式 的 CSS 规 则 如 下 : 
#durationBar { 
border: solid 1px black; 
width: 1005; 
margin-bottom: 5px; 


j 


#positionBar 1 
height: 30px; 
color: white; 
font-weight: bold; 
background: steelblue; 
text-align: center; 


j 
在 视频 播放 过 程 中 ,xvideo> 元 素 会 连续 触发 onTimeUpdate 事 件 , 通过 啊 应 这 个 事件 可 以 更 新 
播放 进度 条 : 
«video id-"videoPlayer" ontimeupdate="progressUpdate()"> 
«source src-"butterfly.mp4" type-'"video/mp4"» 


«source src-"butterfly.ogv" type-'"video/ogg'» 
«/video» 


在 此 ， 代 码 会 取得 视频 的 当前 时 间 点 (保存 在 currentTime 属 性 中 )， 除 以 视频 总 时 间 (保存 
在 duration 属 性 中 )， 然 后 将 得 到 的 百分比 转换 为 positionBar “div> 元 系 的 百分比 长 度 : 


function progressUpdate() { 
// 动 态 设 置 蓝 色 的 positionBar， 从 0 到 100% 
var positionBar = document.getFlementById("positionBar"); 
positionBar.style.width = (video.currentTime / video.duration * 100) + "X"; 











// 显 示 已 经 播放 的 秒 数 ， 保 留 两 位 小 数 
displayStatus.innerHTML = (Math.round(video.currentTime*100)/100) + " sec"; 


j 


JRZR “如果 你 还 想 做 得 更 精致 一 点 ， 可 以 再 添加 一 个 下 载 进度 条 ， 显 示 当 前 已 经 下 载 和 缓冲 的 
多 少 内 容 。 浏 览 器 已 经 把 这 个 功能 内 置 在 它们 自己 的 播放 器 中 了 。 如 果 你 要 自己 做 ， 需 
要 处 理 onprogress 事 件 ， 并 利用 seekable 属 性 。 要 了 解 cvideo> 元 素 提供 的 更 多 属性 、 方 
法 和 事件 ， 可 以 看 看 微软 这 篇 文章 http://msdn.microsoft.conylibrary/ff975073.aspx。 


5.4.3 ”JavaScript 媒 体 播放 器 
如 果 你 真 的 想 标 新 立 异 ,你 可 以 自己 开发 自己 的 首 频 和 视频 播放 磊 。 但 这 可 不 是 一 项 小 工程 ， 
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TEC E SN WU RRIF EERE, 不容 兄 实 现 。 而 且 ， 如 果 不 是 有 一 个 艺术 设计 部 分 作 
后 盾 ， 最 终 出 来 的 产品 界面 很 可 能 会 丑陋 不 堪 。 

别 苦 恼 了 ， 除 了 自己 开发 ， 还 有 很 多 现成 的 HTIMLS 播 放 需 可 供 选 择 。 网 上 有 很 多 人 已 经 开 
发 了 免费 的 基于 JavaScript 的 媒体 播放 需 。 在 此 ， 我 推荐 两 个 靠 谱 的 ， 一 个 是 VideoJS 
( http://videojs.com/ )， 另 一 个 是 jQuery 粉丝 们 喜欢 的 jPlayer ( http:/www.jplayer.org/ )。 这 两 蒜 播放 
器 都 很 小 ,使 用 方便 ， 而 且 可 以 换 肤 。 换 肤 的 意思 就 是 通过 更 换 样 式 表 ， 可 以 为 播放 天 界面 应 用 
不 同 的 样式 (参见 图 5-8 )。 











5-8: VideoJS 播 放 郁 自 带 了 模仿 流行 视频 网 站 
的 皮肤 ， 比 如 YouTube、Vimeo 和 Hulu。 这 里 显 
示 了 播放 控件 的 样式 变化 





大 多 数 JavaScript 媒 体 播 放 需 (包括 VideoJS 和 jPlayer ) 都 内 置 了 Flash 后 备 ， 这 样 就 省 得 我 们 
日 己 去 下 载 Flash 播 放 融 了。 而 且 ，jPlayer 还 提供 了 目 己 的 播放 列表 功能 ， 让 用户 可 以 把 音频 和 视 
频 文 件 组 织 到 一 个 列表 中 ( 图 5-9 )。 





| -一 -一 as video playlist and audi... [+] : - 5 -9 . 使 用 jPlayer 的 播放 列 RYJ 能 可 以 提 供 多 个 音频 


€. [UP ttp//wwwplayerorg/iatest/demo-07) -e e m | 或 视频 文件 。 用 户 既 可 按 顺序 播放 ， 也 可 以 单 击 播放 任 
| àdi "| 意 一 个 。 图 中 的 播放 列表 包含 三 个 视频 文件 














Nemo Teaser 


Findi 





" Big » Bunny Trailer — (m4v | ogv) 


Incredibles Teaser 





http://www.;jplayer.org/latest/demo-02/* — | 





5.4 使 用 Javascript 控制 播放 器 | 139 


要 使 用 VideoJS Pics VideoJSI]y F JavaScript tF. Aa, 1 P IBEOORETE A [REF HS 
加 对 相应 JavaScript 和 样式 表 文 件 的 引用 : 


«IDOCTYPE html» 

«html» 

«head» 
«meta charset-"utf-8"» 
«title»...«/title» 


«script src-"video.js"»«/script» 
«link rel="stylesheet" href-"video-js.css"» 
</head> 


之 后 , 像 平常 使 用 cvideo> 元 素 一 样 , 准备 多 个 <source> 元 泰和 Flash 后 备 即 可 。( VideoJS 播 放 
妖 的 示例 代码 中 已 经 内 置 了 Flowplayer 作 为 Flash 后 备 ， 如 果 你 不 喜欢 ， 可 以 换 成 其 他 Flash 播 放 
器 。) 事实 上 ， 要 说 普通 HTML5 视 频 页 面 与 使 用 VideoJS 的 页 面 有 什么 不 一 样 ， 那 就 是 对 于 后 者 ， 
你 必须 得 用 一 个 特殊 的 <div> 元 素 包 疙 <video> 元 素 ， 如 下 所 示 : 


«div class-"video-js-box"» 
«video class-"video-js" width-'640" height-"264" controls ...» 














«/video» 
«/div» 


仅 此 而 已 。 虽 然 是 扩展 HTMLS， 但 这 么 简单 还 真是 让 人 懂 意 。 
5.4.4. 了 字 需 与 无 障碍 性 


正如 我 们 前 几 章 介绍 过 的 ,HTMLS 的 制定 者 经 常会 考虑 Web 的 无 障 但 性 。 所 谓 无 障碍 ， 就 是 
让 残疾 人 也 能 方便 快捷 地 使 用 功能 丰富 的 网 页 。 

为 图 片 添加 无 隐 碍 信息 很 容易 ， 只 要 在 alt 属 性 中 放 上 一 段 合适 的 描述 性 文本 即 可 。 那 么 ， 
视频 流 中 与 alt 文 本 对 应 那个 东西 应 该 是 什么 呢 ? 人 们 一 致 认为 是 字幕 ， 也 就 是 在 视频 播放 期 
间 ， 甫 时 出 现 的 一 段 段 的 内 容 对 日 或 话 外 音 。 说 起 字幕 ， 有 人 可 能 会 想到 电视 上 的 财源 字 疾 
( closed caption )， 通 稼 都 是 人 物 对 话 或 者 画面 内 容 的 补充 说 明 。 关 键 是 ， 字 幕 可 以 让 即使 听 不 
见 的 人 (或 者 不 想 在 办 公 室 里 打开 电脑 首 箱 , 但 又 处 不 住 观看 《钢铁 侠 3》 预 告 厂 的 人 ) 也 能 把 
视频 看 明日 。 

唉 ， 虽 然 大 家 都 认可 字幕 是 实现 无 障碍 的 好 办 法 ， 但 却 没 人 给 出 一 个 实现 方案 。HTML5 建 
以 了 一 个 ctrack> 元 系 ， 指 加 一 个 外 部 字幕 文件 ， 可 以 是 WebSRIT 格 式 ， 也 可 以 是 新 出 来 还 有 竺 完 
善 的 WebVTTI 格 式 。 将 来 会 有 一 天 ， 浏 览 硕 能 够 谈 取 这 个 元 素 ， 并 为 用 户 提供 相应 控件 ， 以 便 打 
开 和 关闭 字幕 。 而 搜索 引擎 也 可 以 取得 字 疾 文件 ,索引 其 中 的 内 容 。 但 现在 ， 到 底 怎 么 办 还 没有 
定论 ，HTML5 标 准 里 也 没有 给 出 明确 的 说 法 。 

开发 人 员 能 做 的 , 就 是 自己 动手 用 JavaScript 实 现 自 己 的 字 大 机 制 。 通常 , 这 需要 使 用 一 个 浮 
动 在 视频 窗口 上 的 <span> 元 又 , 随 着 播放 进度 适时 地 显示 字 和 内容 。 例 如, VideoSub 这 个 JavaScript 
JÆ (http:/www.storiesinflight.com/js_videosub/ )， 就 可 以 从 WebSRT 兴 名 文 件 中 提取 文本 ， 并 将 其 
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显示 到 视频 窗口 中 ( 如 图 5-10 所 示 ).. VideoSub fs ju] Và soo] EREI SER OU. RAAI V i8 
SOEASRACHUET.CHBUÜGIEE, eias 8. PrEAVIdeoSubz: HOFFE.) 
至 还 有 一 个 JavaScript 播 放 带 内 置 了 字幕 播放 功能 , 这 就 是 LeanBack Player ( http:/ dev.mennerich.- 
name/showroom/html5 video )。 可 惜 的 是 ， 现 在 还 没有 办 法 告诉 大 家 实现 字 医 功能 的 最 佳 方案 ， 
因为 说 什么 都 为 时 尚 早 ， 或 许 应 该 是 下 一 代 浏 览 硕 内 置 这 一 功能 ， 让 我 们 能 够 用 最 少 的 工作 达 
到 目的 。 如 果 你 现在 的 确 需 要 字条 ， 那 么 只 能 先 选 择 JavaScript 方 案 ， 人 然后 随 着 HTML 的 发 展 再 
作 打 算 。 








P freto 7 eola) 图 $-10: 使 用 VideoSub 为 视频 添加 字幕 ， 只 需 
| [L Stories In Flight | HTMLS Video with SRT «Lx 引用 两 个 JavaScript 文 件 和 一 个 WebSRT 文 件 








| e http:// .storiesinflight. /js vid 

€ | L] p://www.storiesinflight.com/js vide 

Here is a simple example of a HTMLS5 video tag with a «track» tag. 
subtitle file which will then automatically be displayed when the vid: 
move the playhead with the mouse. 





Dude - get out of the way! 


The raw video (.MP4) 
The subtitle file (.SRT) 
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基本 Canvas 绘 图 


如 我 们 在 第 1 章 介绍 过 的 , HTML5 的 目标 之 一 就 是 让 网 页 中 的 富 应 用 实现 起 来 更 简单 。 
当然 ， 这 里 所 谓 的 “是 ” 指 的 可 不 是 你 银行 账户 中 的 钱 。 晤 应 用 的 含义 包括 漆 腕 的 图 
片 、 人 机 互动 功能 ， 以 及 胶 目 的 动画 效果 。 
实现 宇 应 用 最 重要 的 新 工具 就 是 Canvas， 这 块 “ 男 布 ” 能 够 把 你 内 心 次 处 的 “毕加索 ”释放 
出 来 。 与 其 他 HTML 元 素 相 比 ，《canvas> 独 特 的 地 方 是 需要 JavaScript 来 操作 。 不 使 用 JavaScript， 
就 无 法 绘制 图 形 , 也 不 能 画 出 图 画 。 这 也 就 意味 着 <canvas> 是 一 个 编程 工具 , 而 这 已 然 超 出 了 Web 
基于 文档 的 设计 初衷 。 
表面 上 看 ， 使 用 <canvas> 似 乎 就 是 把 简化 版 的 Windows“ 男 图 ”程序 硬 塞 到 了 网 页 里 。 但 
深入 之 后 ， 你 会 发 现 这 个 元 素 是 一 切 高 级 图 形 应 用 的 核心 所 在 。 利 用 它 ， 可 以 开发 出 很 多 你 梦 
条 以 求 的 东西 〈 比 如 游戏 、 地 图 和 动态 图 表 )， 也 可 以 开发 出 你 从 未 想 过 的 东西 〈 比 如 音乐 灯 
光秀 、 物 理 模拟 右 ) 在 不 远 的 过 去 , 要 开发 出 这 些 东 西 , 如 条 没有 Flash 等 插件 是 极其 困难 的 。 
而 今天 ， 有 了 “canvas>， 这 一 虱 门 终于 敞开 了 。 只 要 你 原意， 这些 作品 就 可 以 从 你 的 手中 创造 
出 来 。 
本 章 ， 我 们 学 习 如 何在 页 面 中 添加 <canvas>， 并 在 其 中 绘制 线条 、 曲 线 和 简单 图 形 。 然 后 ， 
尝 以 致 用 , 开发 一 个 人 简单 的 绘图 程序 。 男 外 , 大 概 也 是 最 重要 的 , 我 们 会 讨论 怎么 让 包含 <ccanvas> 
的 页 面 在 不 文 持 HTML5 的 旧 浏 览 瘟 中 正常 运作 (9.6.3.1 )。 























注意 “canvas> 对 某 些 开发 人 员 来 说 是 不 可 或 缺 的 ， 而 对 另 一 些 人 来 说 可 能 只 是 一 种 消遣 。( 还 
有 一 些 人 对 《canvas> 感 兴趣 ， 但 他 们 会 觉得 与 使 用 Flash 等 成 熟 的 编程 平台 相 比 ， 学 习 这 
门 新 技术 有 点 麻烦 。) 不 过 有 一 件 事 是 肯定 的 : 这 个 直观 的 绘图 界面 对 百 无 聊 赖 的 程序 员 
而 言 ， 绝 非 一 个 玩具 那么 简单 。 


6.1 Canvas 起 步 


<canvas> 元 紊 就 是 一 块 画 布 ， 就 是 你 提 笔 挥洒 写意 的 地 方 。 从 标记 的 角度 看 ， 它 简单 明了 ， 
只 要 给 它 指定 三 个 属性 即 可 : id、width 和 height。 
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«canvas id-"drawingCanvas" width-"500" height-"300"»«/canvas» 


其 中 ，id 属 性 是 一 个 唯一 的 名 字 ，JavaScript 脚 本 可 以 利用 它 找 到 这 块 “画布 ”。 相 应 地 ，width 
和 height 属 性 指定 的 就 是 这 块 “画布 ”的 宽度 和 高 度 ， 单 位 是 像素 。 





注意 一 定 要 通过 width 和 height 属 性 设置 ccanvas> 的 宽 和 高 ， 而 不 要 在 样式 表 中 设置 其 宽度 和 
高 度 。7.1.1 节 的 附注 栏 解释 了 如 果 通 过 样式 表 设 置 <canvas> 的 宽 和 高 会 导致 什么 问题 。 





开始 的 时 候 ，<canvas> 在 页 面 上 会 显示 一 块 空 日 、 无 边框 的 矩形 ( 意思 就 是 你 看 不 到 它 )。 
为 了 让 它 在 页 面 显 现 出 轮廓 ， 可 以 通过 一 条 样式 规则 为 它 应 用 不 同 的 背景 颜色 或 者 边框 : 


canvas { 
border: 1px dashed black; 


Í 
图 6-1 展 示 了 这 块 空白 的 画布 。 











图 6-1 . 每 个 <canvas> 一 开始 就 是 一 


C - JC aD -J [81 cHTMLsChapte P ~ © X || Æ canvas Test X | | in) p 个 空 日 的 矩形 。 哪怕 要 在 上 面 画 一 


条 直线 , 你 都 得 编写 JavaScript 代 码 





开始 绘图 之 前 ,需要 JavaScript 执 行 两 步 操作 。 首 先 , 利用 document.getElementById() 方 法 取 


得 <canvas> 对 象 : 

var canvas = document.getElementById("drawingCanvas"); 

这 没有 什么 需要 解释 的 ， 当 你 需要 从 当前 页 面 中 取得 某 个 元 素 时 ， 就 要 使 用 document .8get- 
ElementById() 方 法 。 
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注意 ”如 果 你 不 熟悉 JavaScript， 也 不 要 着 急 。 学 会 基本 的 JavaScript 并 不 难 ， 看 看 附录 B 吧 。 要 
是 你 还 想 进 一 步 提高 自己 的 编程 水 平 ， 想 投入 点 时 间 好 好 学 一 学 JavaScript 语 言 ， 建 议 参 
考 JavaScript & jQuery: The Missing Manual. 


其 次 ， 必 须 调用 <canvas> 对 象 的 getContext() 方 法 ， 取 得 二 维 绘图 上 下 文 : 

var context = canvas.getContext("2d"); 

什么 是 绘图 上 下 文 ?9 你 可 以 把 它 想象 成 一 个 超级 强大 的 绘图 工具 , 它 可 以 帮 你 完成 所 有 绘 
任务 ， 比 如 绘制 矩形 、 输 出 文本 、 艇 入 图 像 …… 总 之 ， 所 有 绘图 操作 部 是 通过 它 来 完成 的 。 





注意 ”这 里 的 上 下 文明 确 地 称 为 “二 维 上 下 文 ”( 在 代码 中 用 "2d" 表 示 )， 可 能 就 会 有 读者 想 问 : 
那 有 没有 三 维 绘图 上 下 文 呢 ? 答案 是 目前 还 没有 ， 但 HTMLS 的 制定 者 正在 考虑 ， 将 来 就 
会 有 的 
A O 





取得 了 上 下 文 对 象 之 后 ,任何 时 候 孝 可 以 进行 绘图 了 。 比 如 ， 可 以 在 页 面 加 载 完 毕 后 、 用 户 
单 击 了 按钮 时 ， 等 等 。 刚 开始 接触 <canvas> 的 该 者 ， 心 里 可 能 会 想 : 要 是 能 有 一 个 直观 的 练习 页 
面 就 好 了 。 好 吧 ， 下 面 就 是 那么 一 个 模板 页 面 : 


<!DOCTYPE html» 

«html lang= en > 

«head» 
«meta charset-"utf-8"» 
«title»Canvas Test«/title» 


«style» 
canvas { 
border: 1px dashed black; 


} 
</style> 


<script> 
window.onload = function() { 


var canvas = document.getElementById("drawingCanvas"); 
var context = canvas.getContext("2d"); 


// (把 你 自己 的 绘图 代码 写 在 这 里 ) 
<e 
</head> 


<body> 

<canvas id="drawingCanvas" width="500" height="300"></canvas> 
</body> 
</html> 


代码 中 的 <style> 元 素 为 ccanvas> 加 了 边框 ， 以 便 它 在 页 面 中 显示 出 轮廓 来 。 而 <script> 部 分 
则 主要 处 理 window.onload 事 件 ， 这 个 事件 是 在 浏览 器 加 载 完 页面 时 触发 的 。 然 后 ， 代 码 取 得 了 
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<canvas> 对 象 ， 并 创建 了 绘图 上 下 文 ， 为 下 一 步 绘 图 作 好 准备 。 就 这 样 了 ， 接 下 来 你 就 可 以 用 这 
个 页 面 作为 起 点 开始 试验 了 。 


注意 ”当然 ， 如果 是 在 真实 的 网 站 中 使 用 <canvas>， 应 该 把 JavaScript 代 码 挪 到 一 个 外 部 文件 中 ， 
这 样 才 能 保持 页 面 的 清晰 (相关 内 容 请 参见 附录 B )。 不 过 就 目前 来 讲 ， 把 所 有 东西 都 放 
在 一 个 页 面 里 可 以 让 试验 更 方便 。 建 议 读者 从 本 书 站 点 ( www.prosetech.com/html5 ) 下 载 
CanvasTemplate.html 文 件 ， 然 后 自己 动手 输入 下 面 的 示例 代码 。 


6.1.1 男 直 线 


现在 一 切 准 备 就 绪 ， 可 以 绘图 了 。 等 一 等 ， 在 我 们 涂鸦 之 前 ， 还 得 先 了 解 一 个 基本 知识 点 : 
画布 的 坐标 系 。 网 6-2 展 示 了 “canvas> 中 坐标 系 的 概念 。 


Cu 图 6-2: 与 其 他 HTML 元素 一 样 ， 
(m Co) [E] CAHTMLSA Chapter O ~ © X || @ Canvas Test $ Y* | xcanvas> 坐 标的 左上 角 是 坐标 原点 
? 1 || (0,0)。 向 右 移动 ，x 值 增 大 ， 向 下 
| 移动 ，y 值 增 大 。 对 于 500 像 素 x300 
像素 的 <canvas> 元 素来 说 ， 其 右 下 
角 坐 标 就 是 ( 500,300 ) 


Point (0.0) 


T 
We 
gx 
$ 


.4 一 一 250 像 素 一 


Point (250,150) 








最 简单 的 绘图 操作 就 是 画 一 条 实心 下 线 。 为 此 ， 需 要 通过 绘图 上 下 文 执行 三 个 操作 。 首 乞 ， 
使 用 moveTo() 方 法 找到 直线 的 起 点 。 其 次 , 使 用 lineTo() 方 法 在 起 点 和 终点 之 间 建 立 联系 。 最 后 ， 
调用 stroke() 方 法 ， 把 百 线 实际 地 绘制 出 来 : 


context .moveTo(10, 10) ; 
context.lineTo(400,40); 
context.stroke(); 
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如 果 你 觉得 不 好 理解 ， 也 可 以 这 么 想 : 首先 ， 拿 起 画笔 把 笔头 放 在 画布 上 的 某 一 点 〈 使 用 
moveTo 方 法 ), 然后 在 画布 上 夯 直 线 (使 用 lineTo 方 法 ), 最 后 让 直线 显现 出 来 (使 用 stroke 方 法 )。 
结果 就 是 一 条 起 点 为 (10,10)， 终 点 为 (400,40) 的 1 像素 宽 的 黑色 直线 。 

不 止 如 此 ， 要 是 你 还 有 什么 创意 ,也 是 可 以 美化 直线 的 。 在 调用 stroke() 方 法 把 直线 实际 地 
绘制 出 来 之 前 , 你 可 以 在 任何 时 候 设置 绘图 上 下 文 的 3 个 属性 : lineWidth、strokeSstyle 和 lineCap。 
这 几 个 属性 会 一 下 影响 后 面 的 绘图 操作 ， 除 非 再 修改 它们 的 值 。 

顾名思义 ,使 用 lineWidth 可 以 设置 线条 宽度 ， 单 位 是 像素 。 比 如 ， 要 绘制 10 像 系 粗 的 线条 ， 
AU POE E: 

context.lineWidth = 10; 

WijstrokeStyleH] T x Er Zk Z& HJ EI E c LRL CS, n] LAE HHH TML ILES 2 HTML GS 28903 8S CSS 
üyrgb()PRZk. Hob. fHIrgb( KZ ARRE ZR. AANE 很 多 绘图 和 
平面 处 理 软件 都 使 用 rgb() 颜 色 表 示 法 。) 无 论 你 使 用 哪 种 方式 , 都 需要 把 颜色 值 放 在 一 对 引号 内 , 
比如 : 


// 使 用 HTML 颜 色 编 码 设 置 颜色 〈 砖 红色 ) 
context.strokeStyle = "#cd2828"; 











// 使 用 rgb() 子 数 设置 颜色 ( 砖 红色 ) 
context.strokeStyle = "rgb(205,40,40)"; 


注意 之 所 以 把 这 个 属性 命名 为 strokeStyle 而 不 是 strokeColor, 是 因为 通过 它 不 仅仅 可 以 设置 
颜色 。 下 一 章 我 们 就 会 介绍 到 ， 通 过 它 还 可 以 设置 叫做 渐变 的 混合 颜色 ( 参见 7.2.3 节 ) 
和 基于 图 像 的 图 案 ( 参见 7.2.2 节 )。 


最 后 ， 使 用 lineCap 可 以 设置 线条 两 端的 形状 ， 即 线头 类 型 。 上 默认 值 是 putt， 即 方 涉 。 为 外 ， 
还 可 以 使 用 round (EIX ) square (效果 与 butt 类 似 , 也 是 方 头 , 但 会 在 线条 的 两 头 各 增加 一 半 
线 宽 的 长 度 ， 因 此 可 以 叫 “加 长 方 头 ”。) 

以 下 就 是 我 们 要 绘制 的 三 条 不 同 线头 水 平 线 的 全 部 脚本 代码 (结果 如 图 6-3 所 示 ) 要 试验 这 
些 代 码 ， 可 以 把 它们 包 交 到 一 个 丽 数 里 。 然 后 ， 在 前 面 介 绍 的 window.onload 事 件 处 理 枯 数 中 调 
用 它 即 可 : 

var canvas = document.getElementById("drawingCanvas"); 


var context - canvas.getContext("2d"); 


// 设 置 线条 宽度 和 颜色 (适用 于 所 有 线条 ) 
context.lineWidth = 20; 
context.strokeStyle = "rgb(205,40,40)"; 


// 绘 制 第 一 条 直线 ， 使 用 默认 的 方 头 
context .moveTo(10,50); 
context.lineTo(400,50); 
context.lineCap = "butt"; 
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context .stroke(); 


// 绘 制 第 二 条 直线 ， 使 用 圆 头 
context.beginPath(); 
context .moveTo(10, 120) ; 
context.lineTo(400,120); 
context.lineCap = "round"; 
context .stroke(); 


// 绘 制 第 三 条 直线 ， 使 用 加 长 方 头 
context.beginPath(); 

context .moveTo(10, 190) ; 
context.lineTo(400,190); 
context.lineCap = "square"; 
context.stroke(); 


Laseas caer Je A 


pme J) 图 6-3: 上面 的 线 使 用 标准 的 方 头 ， 
Lt. ”| 而 下 面 的 线 则 使 用 了 加 长 的 线头 
| -| | (一 个 加 长 圆 头 , 一 个 加 长 方 头 ), 











即 在 线条 的 两 头 各 增加 一 半 线 帘 
的 长 度 











这 个 例子 中 又 介绍 了 一 个 新 的 特性 : 绘图 上 下 文 的 beginPath() 方 法 。 每 次 调用 beginPath() 
方法 ,都 重新 开始 一 个 新 线段 的 绘制 。 如 果 没 有 这 一 步 ， 那 么 每 次 调用 stroke() «bmp E 
原 有 的 线段 再 重新 绘制 一 遍 。( 在 修改 了 其 他 上 下 文 属性 的 情况 下 ， 这 个 问题 会 比较 明显 。 就 以 
上 面 的 代码 为 例 ， 如 果 不 调用 beginPath() 的 话 ， 那 么 就 会 发 生 在 原 有 直线 上 以 新 颜色 、 新 宽度 
或 新 线头 形状 重新 绘制 的 问题 。) 


注意 尽管 开始 绘制 新 线段 时 要 调用 beginPath()， 但 结束 绘制 线段 则 不 一 定 要 做 什么 。 每 次 开 
始 新 路 径 时 ， 原 来 的 路 径 就 会 自动 “完成 ”。 


6.1 Canvas 起 步 | 147 


6.1.2. 路径 与 形状 


为 了 确保 三 条 和 直线 各 目 独 立 ,， 上 一 个 例子 将 每 条 下 线 虱 按 照 新 路 径 来 绘制 。 这 样 可 以 为 不 同 
的 百 线 分 别 应 用 不 同 的 颜色 〈 以 及 不 同 的 线 宽 和 线头 )。 实 际 上 ， 路 径 本 里 也 是 很 有 用 的 ， 因 为 
可 以 通过 路 径 来 填充 目 定 义 的 形状 。 例 如 ， 以 下 代码 可 以 绘制 出 红色 的 空心 三 角形 : 


Context .moveTo(250,50); 
context.lineTo(50,250); 
context.lineTo(450,250); 
context.lineTo(250,50); 














context.lineWidth = 10; 
context.strokeStyle - "red"; 
context.stroke(); 


不 过 ， 如 果 想 给 这 个 三 角形 填 上 颜色 ,那么 stroke() 方 法 是 无 能 为 力 的 。 此 时 ， 应 该 先 调用 
closePath() 来 明确 地 关闭 路 径 ， 然 后 再 把 fillstyle 属 性 设置 为 想 要 填充 的 颜色 ， 最 后 再 调用 
fil1() 方 法 完成 填充 操作 .: 


context.closePath(); 
context.fillStyle = "blue"; 
context.fill(); 


xx - PIT GM WARS MEREEE— PS Boc. WRES RAE, AKERA 
必 再 绘制 最 后 一 条 线段 了 ， 因 为 closepPath() 会 目 动 在 最 后 一 个 绘制 点 与 绘制 起 点 间 绘 制 一 条 
线 。 其 次 ， 最 好 是 先 填充 形状 ， 然 后 再 绘制 其 轮廓 。 否 则 ， 形 状 的 轮廓 线 会 有 一 部 分 被 填充 色 
E ELM 

好 了 ， 下 面 就 是 绘制 三 角形 的 完整 代码 : 


var canvas = document.getElementById("drawingCanvas"); 
var context = canvas.getContext("2d"); 





























context .moveTo(250,50); 
context.lineTo(50,250); 
context.lineTo(450,250); 
context.closePath(); 


// 填 充 内 部 
context.fillStyle = "blue"; 
context .fill(); 


// 绘 制 轮廓 

context.lineWidth = 10; 
context.strokeStyle = "red"; 
context.stroke(); 


有 读者 可 能 已 经 注意 到 了 , 这 个 例子 并 没有 调用 beginpPath() 方 法 。 这 是 因为 <canvas> 在 开始 
的 时 候 ， 会 日 动 开始 一 段 新 路 径 。 如 有 条 你 想 重 新 开始 另 一 段 路 径 ， 那 就 要 调用 beginpPath()。 重 
新 开始 新 路 径 意 味 你 可 能 重新 设置 了 线条 的 样式 ,或 者 准备 绘制 男 外 一 个 新 的 形状 。 图 6-4 展 示 
了 以 上 代码 的 结果 。 
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A 中 图 6-4: 要 创建 一 个 类 似 这 个 三 角 

VE | 形 的 封闭 形状 ,使 用 noveTo() 方 法 
定位 起 点 , 使 用 lineTo() 方 法 绘制 
每 一 条 线段 ， 然 后 用 closePath() 
补充 完成 路 径 。 然后 再 调用 fil1() 
填充 ， 调 用 stroke() 描 边 





注意 在 绘制 前 后 相连 的 线段 时 (比如 上 面 例子 中 的 三 角形 )， 可 以 通过 设置 绘图 上 下 文 的 au 
lineJoin 属 性 指定 线段 交点 的 形状 。 这 个 属性 的 默认 值 是 mitre ( 锐角 斜 接 )， 另 外 两 个 值 
X: round ( H 3: ) 和 bevel (平头 斜 接 ), 


多 数 情况 下 ， 如 有 末 想 要 绘制 复杂 的 形态 ， 你 都 再 要 目 己 逐个 线段 地 绘制 。 但 有 一 个 例外 , 那 
就 是 绘制 矩形 。 可 以 使 用 们 llRect() 方 法 下 接 填 充 一 个 矩形 区 域 。 只 要 为 它 提供 矩形 区 域 左 上 角 
HJ AR. v ERES RE BI RT 

例如 ， 要 在 (0,10) 点 放置 一 个 100 像 素 x 200 像 素 的 矩形 ， 可 以 使 用 以 下 代码 : 

fillRect(0,10,100,200); 

与 位 11() 方 法 一 样 ，fillRect() 也 是 从 绘图 上 下 文 的 三 ]15tyle 属 性 取得 颜色 。 

类 似 地 ， 还 有 一 个 strokeRect() 方 法 ， 用 于 下 接 绘制 一 个 矩形 框 : 

strokeRect(0,10,100,200); 

绘制 窍 形 框 时 ，strokeRect() 的 宽度 取 自 linewWidth 属 性 ， 而 边框 宽度 和 颜色 则 取 目 
strokeStyle 属 性 ， 与 stroke() 方 法 一 样 。 


6.1.3 ”绘制 曲线 


要 是 除了 矩形 和 直线 之 外 ， 你 还 想 弄 点 别 的 更 有 意思 的 ( 谁 不 想 呢 )， 那 就 得 理解 绘制 曲线 
的 四 个 方法 : arc()、artTo()、bezierCurveTo() 和 quadraticCurveTo()。 使 用 这 几 个 方法 分 别 能 
f LAS IR] IZ ar HL. 但 共同 点 是 它们 都 要 求 你 做 一 点 人 简单 的 数学 计算 (有 时 候 计 算 量 还 是 
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eR KH )。 

这 四 个 方法 里 面 ，arc() 是 最 简单 的 ， 它 可 以 绘制 一 段 圆 浙 。 在 画 圆 弧 之 前 ， 你 可 以 先 闭 上 
眼睛 ， 想 象 有 奢 么 一 个 加 ， 而 你 想 绘制 的 圆 孤 就 是 这 个 加 上 的 一 部 分 ( 如 图 6-5 所 示 )。 然后， 你 
就 可 以 对 要 传 给 arc() 方 法 的 参数 做 到 胸 有 成 们 了。 








图 6-5: 圆 驶 看 起 来 简单 ， 但 要 拍 
述 蕊 得 需要 多 方面 的 信息 。 首 先 ， 
需要 确定 一 个 想象 中 的 圆 形 。 而 确 
定 圆 形 就 必须 有 圆心 的 坐标 ( #1 ) 
起 点 角度 (#3) HERNÓREECH) 和 表示 大 小 的 半径 (2) 。 然 后 ， 
为 了 换 述 圆 弧 的 长 度 ,必须 知道 其 


起 点 的 角度 (43) 和 终点 的 角度 
(44) 。 这 两 个 角度 都 要 用 弧度 表 
示 ， 即 常量 pi 的 倍数 ( 1pi 是 半圆 ， 
2pi 是 整个 圆 形 ) 








想 通 了 所 有 细 布 之 后 ， 接 下 来 就 是 调用 arc() 方 法 : 


var canvas = document.getElementById("drawingCanvas"); 
var context = canvas.getContext("2d"); 


// 创 建 变 量 ,保存 圆 陶 的 各 方面 信息 
var centerX = 150; 

var centerY - 300; 

var radius - 100; 

var startingAngle = 1.25 * Math.PI; 
var endingAngle = 1.75 * Math.PI; 


/ 14% A 58 R 065 48 8: 25] D] R 
context.arc(centerX, centerY, radius, startingAngle, endingAngle); 
context.stroke(); 


如 果 在 调用 stroke() 之 前 调用 closePath(), 就 会 在 圆 弧 的 起 点 和 终点 之 间 绘 制 一 条 直线。 于 
是 ， 就 可 以 得 到 一 个 封闭 的 小 半 病 。 
实际 上 , 圆 形 也 就 是 这 人 么 个 圆 跌 继续 回 两 端 伸展 构成 的 。 因 此 如 有 果 想 男 一 个 整 圆 ,可 以 这 样 





var canvas = document.getElementById("drawingCanvas"); 
var context = canvas.getContext("2d"); 


var centerX - 150; 


var centerY - 300; 
var radius - 100; 
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var startingAngle - 0; 
var endingAngle - 2 * Math.PI; 


context.arc(centerX, centerY, radius, startingAngle, endingAngle); 
context.stroke(); 


注意 使 用 arc() 方 法 画 不 了 椭圆 ( 扁 圆 )。 要 画 椭圆 ， 要 么 使 用 接 下 来 我 们 会 介绍 的 更 复杂 的 
绘制 曲线 的 方法 ， 要 么 使 用 变换 (参见 6.1.4 节 ) 把 普通 的 圆 拉 伸 成 椭圆 。 


接 下 来 要 介绍 的 三 个 方法 (artTo()、bezierCurveTo() 和 quadraticCurveTo() ) 需要 你 承受 一 
些 几 何 计 算 方 面 的 挑战 。 这 三 个 方法 要 用 到 同一 个 概念 : 控制 点 。 控制 点 本 时 并 不 包含 在 最 终 的 
曲线 里 ， 但 能 够 影响 曲线 最 终 的 形状 。 最 好 的 例子 就 是 帆 塞 尔 曲线 ， 几 乎 任何 插图 软件 中 都 会 用 
到 它 。 贝 窄 尔 曲线 之 所 以 那么 流行 ， 就 是 因为 这 种 曲线 能 够 保证 平滑 ,哪怕 再 小 、 再 大 的 弧度 都 
可 以 。 图 6-6 展 示 了 贝 塞 尔 曲线 的 控制 点 。 








图 6-6: 一 条 贝 塞 尔 曲线 有 两 个 控制 点 。 曲 线 的 起 点 切线 连接 第 
一 个 控制 点 ， 终 点 切线 连接 第 二 个 控制 点 。 两 条 连接 线 之 间 就 


是 曲线 。 曲 线 的 弯曲 程度 ( 曲率 ) 由 控制 点 与 起 点 和 终点 的 距 
离 决 定 。 距 离 越 远 ， 弯 曲 度 越 大 。 这 有 点 像 引 力 ， 只 不 过 越 远 


力 越 大 








以 下 就 是 用 于 创建 图 6-6 所 示 曲 线 的 代码 : 


var canvas = document.getElementById("drawingCanvas"); 
var context = canvas.getContext("2d"); 


// 把 笔 移动 到 起 点 位 置 
context.moveTo(62, 242); 


// 创 建 变 量 ， 保 存 两 个 控制 点 及 曲线 终点 信息 
var controll x = 187; 

var controli y = 32; 

var control2 x = 429; 
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var control2 y - 480; 
var endPointX = 365; 
var endPointY - 133; 


// 绘 制 曲 线 


context.bezierCurveTo(controli x, controli y, control2 x, control? y, 


endPointX, endPointY); 
context.stroke(); 


复杂 而 自然 的 形状 通常 需要 多 个 圆 跌 和 曲线 拼接 而 成 。 完 成 之 后 ， 可 以 调用 closepPath() 以 
便 填 充 ， 或 者 显示 出 完成 的 轮廓 。 学 习 绘 制 曲 线 的 最 好 方式 ， 就 是 自己 动手 编写 代码 。 为 此 ,本 
书 为 读者 推荐 一 个 不 错 的 测试 页 面 : http:Wtinyurl.com/htmlSbezier ( 如 图 6-7 所 示 )。 
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any restrictions but please don't expect 24/7 support! A link back to SitePoint.com is appreciated. 








eIo(90, 407); 
ctx.bezierCurveTo(174, 476, 
PAS ADT T 


T 
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This demonstration shows how 
bézier curves can be drawn on a 
canvas element. Drag the line 
ends or the control points to 
change the curve 


For more information, please 
refer to: 

How to Draw Bezier Curves on an 
HTML5 Canvas 


See also: 
How to Draw Quadratic Curves on 
an HTMLS Canvas 


Disclaimer 


The code was developed by 
Craig Buckler of 
OptimalWorks.net for 
SitePoint.com. 


This code can be used without 








6.1.4 变换 





图 6-7: 在 图 中 所 示 的 这 个 页 面 http:// 
tinyurl.com/html5bezier ) 里 ， 可 以 拖 动 控 
制 点 、 起 点 和 终点 任意 改变 其 中 贝 塞 尔 
曲线 的 形状 。 更 重要 的 是 ， 拖 动 过 程 中 ， 
页 面 会 为 你 生成 相应 的 HITML5 绘 图 代 
码 ， 复 制 下 来 就 能 在 自己 的 页 面 中 创建 
同样 的 曲线 。 这 里 还 有 一 个 所 见 即 所 得 
的 二 次 曲线 试验 页 面 tinyurl.com/html5- 
quadratic 





变换 ， 就 是 一 种 通过 变化 ccanvas> 坐 标 系 达到 绘制 目的 的 技术 。 例 如 ,假设 你 想 在 三 个 地 方 
绘制 相同 的 正方 形 。 为 此 ， 可 以 调用 三 次 rect()， 每 次 部 传人 不 同 的 起 点 位 置 : 





var canvas = document.getElementById("drawingCanvas"); 


var context = canvas.getContext ("2d" 


È 


// 在 三 个 地 方 绘制 同样 大 小 〈30x30) 的 正方 形 


EOntext rectr0 O, 30, 30); 
context.rect(50, 50, 30, 30); 
context.rect(100, 100, 30, 30); 


context.stroke(); 
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“数学 恐惧 症 患 者 ”的 绘图 秘诀 
谁 能 告诉 我 不 用 费 脑子 也 能 画 出 这 些 图 形 的 方法 ? 
如 果 你 布 望 用 《canvas> 创 作出 村 人 眼目 的 图 形 , 但 又 不 愿意 复习 几何 知识 ， 下 怕 会 有 点 进 
退 两 难 。 但 你 是 幸运 的 ,下 面 本 书 就 给 你 推荐 几 个 方法 ， 让 人 不 用 关心 数学 也 能 画 出 自己 想 要 
的 效果 。 

O 使 用 绘图 库 。 了 既然 有 现成 的 绘图 库 可 以 拿 来 绘制 圆 形 、 三 角形 、 椭 圆 形 和 多 边 形 ， 那 为 
哈 还 自己 一 笔 一 笔 地 务 呢 ? 绘 图 库 的 设计 思路 很 简单 ， 它 们 提供 很 多 高 级 方法 ( 比如 ， 
用 fillE11ipse() 和 坐标 值 就 能 绘制 椭圆 )， 但 底层 使 用 JavaScript 帮 你 完成 正确 的 
«canvas» 操作 。 CanvasPlus ( http://code.google.com/p/canvasplus/ ) 和 Artisan JS 
( http://artisanjs.com/ ) 就 是 两 个 绘图 库 。 但 这 两 个 (以 及 更 多 ) 库 还 在 快速 发 展 ， 现 在 
预言 哪个 库 最 终 能 坚持 下 来 ， 哪 个 库 可 以 在 专业 的 开发 中 采用 还 为 时 尚 早 。 

口 绘制 位 图 。 与 其 笋 费 苦 心地 在 <canvas> 上 绘图 , 不 如 找 一 张 现成 的 图 片 误 入 到 <canvasy 
中 。 比 如 ， 要 是 有 一 个 名 为 circle.png 的 圆 形 图 和 案 ， 可 以 用 7.1 节 介绍 的 代码 把 它 插入 到 
<canvas> 中 。 不 过 ， 插 入 图 片 会 失去 一 些 灵 活性 【比如 ， 拉 伸 、 调 整 或 删除 其 某 一 部 
2 

口 使 用 导出 工具 。 如 果 图 形 比 较 复 杂 ， 而 你 需要 在 ccanvas> 上 操作 它 ， 或 者 想 通 过 它 实现 
交互 ， 那 么 绘制 位 图 的 方法 就 不 够 好 了 。 在 这 种 情况 下 ， 如 果 有 一 个 图 形 到 <canvas> 代 6 
码 的 转换 工具 会 比较 好 ,显然 ,是 有 这 种 工具 的 ,比如 针对 Adobe Illustratori Ai— Canvas 
插件 ( http://visitmix.com/labs/ai2canvas/ )， 能 够 把 Adobe Illustrator 的 插画 转换 成 HTML 
网 页 ， 并 通过 JavaScript 代 码 在 <canvas> 上 重新 创建 相同 的 图 形 。 


或 者 ， 也 可 以 在 同一 个 地 方 调用 三 次 rect()， 但 每 次 都 移动 一 下 坐标 系 ， 最 终 也 能 达到 在 三 
个 不 同位 置 绘制 正方 形 的 目的 ， 比 如 : 

var canvas = document.getElementById("drawingCanvas"); 

var context = canvas.getContext("2d"); 

// 在 (0,0) 点 绘制 正方 形 

context.rect(0, 0, 30, 30); 


// 把 坐标 系 向 下 、 向 右 各 移动 50 像 素 
context.translate(50, 50); 
context.rect(O, 0, 30, 30); 


// 把 坐标 系 再 向 下 移 一 点 ; 变换 是 可 以 累积 的 
// 因 此 现在 (0,0) 上 点 实际 上 将 被 平移 到 (100,100) 
context.translate(50, 50); 

context.rect(O, O, 30, 30); 


context.stroke(); 
以 上 两 段 代码 得 到 的 结果 都 一 样 : 在 三 个 不 同位 置 绘制 三 个 相同 的 正方 形 。 
表面 上 看 ， 变 换 把 一 些 复 洒 的 绘图 任务 变 得 更 加 复杂 了 。 但 在 处 理 一 些 琼 手 问题 的 场合 , 使 
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用 变换 却 能 收 到 神奇 的 效果 。 例 如， 假设 你 有 一 个 函数 ， 负 页 绘制 一 系列 复杂 的 图 形 ， 最终 再 将 
它们 组 合成 一 幅 岛 的 图 片 。 现 在 ， 你 准备 让 乌 动 起 来 ， 在 <canvas> 区 域 里 飞翔 。( 7.4 廊 将 介绍 在 
<canvas> 上 生成 动画 。) 

如 有 末 没 有 变换 ， 要 实现 这 个 目标 必须 在 每 次 绘制 乌 的 时 候 调 整 一 次 坐标 。 而 有 了 变换 ,绘图 
代码 可 以 不 变 ， 只 要 反复 修改 坐标 系 的 位 置 就 好 了 。 

使 用 变换 有 几 种 不 同 的 方式 。 在 前 面 的 例子 中 ， 我 们 使 用 平移 (translate) 变换 移动 了 坐标 
系 的 原点 一 一 也 就 是 (0,0) 点 , 默认 位 置 在 ccanvas> 的 左上 角 。 除 了 平移 变换 之 外 ,还 有 缩放 ( scale ) 
变换 、 旋 转 (rotate ) Z5 变换 和 大 阵 ( matrix ) 变换 。 缩 放 变 换 可 以 把 本 来 要 绘制 的 形状 放大 或 缩小 ， 
旋转 变换 可 以 旋转 坐标 系 。 怎 阵 变换 更 复杂 一 些 , 但 可 以 在 任意 方 回 拉 伸 和 扭曲 坐标 系 ， 要 求 你 
必须 理解 复杂 的 矩阵 计算 ， 只 有 这 样 才 能 实现 目 己 想 要 的 视 党 效果 。 

变换 是 累积 的 。 比 如 ,下 面 这 个 例子 先 使 用 translate() 方 法 把 坐标 系 从 (0,0) 平 移 到 (100,100)， 
然后 又 在 新 位 置 使 用 rotate() 方 法 把 坐标 系 旋 转 了 几 次 。 每 旋转 一 次 , 都 会 绘制 一 个 新 的 正方 形 ， 
从 而 得 到 如 图 6-8 所 示 的 图 形 。 














EUSCEHU o E) uos. 通过 绘制 一 系列 旋转 的 正方 形 ， 可 以 生成 类 似 方 
| | L Transforms . 形 dg 线 的 图 案 Pals 


Transforms.html 





var canvas = document.getElementById("drawingCanvas"); 
var context = canvas.getContext("2d"); 


// 移 动 (0,0) 点 。 这 一 步 很 重要 
// 因 为 接 下 来 要 围绕 新 原点 旋转 
context.translate(100, 100); 


// 绘 制 10 个 正方 形 

var copies = 10; 

for (var i-1; i«copies; i++) { 
// 绘 制 正 方形 之 前 ， 先 旋转 坐标 系 


// 旋 转 一 周 是 2*Math.PI， 因 此 每 个 正方 形 的 旋转 角度 取决 于 要 绘制 的 总 数 
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context.rotate(2 * Math.PI * 1/(copies-1)); 


// 绘 制 正 万 形 
context.rect(0, 0, 60, 60); 


context .stroke(); 


提示 调用 绘图 上 下 文 的 save() 方 法 可 以 保存 坐标 系 当 前 的 状态 。 然 后 ， 再 调用 restore() 方 法 
可 以 返回 保存 过 的 前 一 个 状态 。 如 果 要 保存 坐标 系 的 状态 ， 必 须 在 应 用 任何 变换 之 前 调 
用 save()， 这 样 再 调用 Testorfe() 才 能 把 坐标 系 4 P 而 在 多 步 操 作 绘制 复杂 
图 形 时 ， 往 往 都 需要 多 次 保存 坐标 系 状态 。 这 些 状态 就 如 同 浏览 器 中 的 历史 记录 一 样 。 
每 次 调用 Testore()， 坐 标 系 就 会 恢复 到 前 一 个 最 近 的 状态 


详细 讨论 变换 超出 了 本 章 范 围 。 如 果 你 想 全 面 深 入 地 了 人 解 变换 ,可 以 参考 Mozilla( 开发 Firefox 
浏览 器 的 公司 ) 的 文档 : http://tinyurl.conVb74204。 


6.1.5 透明度 


到 现在 为 止 ， 我 们 一 直 都 在 使 用 实心 颜色 。 实 际 上 ，《canvas> 文 持 使 用 半 透 明 的 颜色 ， 从 而 
实现 多 个 形状 苹 加 透视 的 效果 。 有 两 种 创建 透明 图 形 的 方式 ,第 一 种 就 是 使 用 rgbal() 洱 数 设置 透 
HE ( 即 设置 fillstyle 和 strokeSstyle 属 性 )， 而 不 是 使 用 rgb() 函 数 。 注 意 ，rgba() 了 哺 数 接收 4 
个 参数 : 红 、 绿 、 蓝 颜色 分 量 (0—255) 和 颜色 的 不 透明 度 值 。 最 后 一 个 参数 (alpha) 值 为 1， 
表示 完全 不 透明 ， 值 为 0 表示 完全 不 可 见 。 位 于 0 和 1 之 间 的 值 ( 比如 0.5 )， 表 示 颜 色 部 分 透明 ， 
即 透 过 它 能 看 到 下 方 的 形状 。 











注意 ”哪些 内 容 在 下 ， 哪 些 内 容 在 上 ， 完 全 取决 于 绘制 操作 的 先后 顺序 。 比 如 ， 先 画 一 个 圆 形 ， 
再 在 相同 位 置 上 画 一 个 正方 形 ， 则 正方 形 会 登 加 在 圆 形 上 面 。 





下 面 这 个 例子 绘制 了 一 个 圆 形 和 一 个 三 角形 。 使 用 的 颜色 相同 , 但 三 角形 的 不 透明 度 值 被 设 
置 为 0.$， 因 此 是 半 透 明 的 : 


var canvas = document.getElementById("drawingCanvas"); 
var context = canvas.getContext("2d"); 


// 设 置 填充 及 描 边 颜色 


context.fillStyle = "rgb(100,150,185)"; 
context.lineWidth = 10; 
context.strokeStyle = "red"; 


// 绘 制 圆 形 

context.arc(110, 120, 100, 0, 2*Math.PI); 
context.fill(); 

context.stroke(); 
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// 别 忘 了 调用 beginPath()， 然 后 再 绘制 新 形状 
// 否 则 ， 两 个 形状 的 路 径 会 意外 地 连 在 一 起 
context.beginPath(); 


/ / F| 2E-3& 87] 82 ZR E535. 7, — f8 76 
context.fillStyle - "rgba(100,150,185,0.5)"; 


// 好 了 ， 绘 制 三 角形 
context .moveTo(215,50); 
context.lineTo(15,250); 
context.lineTo(315,250); 
context.closePath(); 
context . fi11(); 
context.stroke(); 


图 6-9 是 这 个 例子 的 结 


图 6-9: 左 : 两 个 实心 、 寺 加 在 一 起 的 图 形 。 右 : 放下 的 圆 形 是 实心 
的 ， 上 面 的 三 角形 是 半 透 明 的 。 半 透明 的 形状 看 起 来 较 明 亮 C 因为 


透 过 它们 能 看 到 白色 青 景 ) ， 透 过 它们 可 以 看 到 下 方 的 内 容 。 注 意 
这 个 例子 中 的 三 角形 是 半 透 明 的 ， 但 三 角形 的 边框 则 使 用 了 实 色 





第 二 种 创建 透明 图 形 的 方式 是 设置 绘图 上 下 文 的 globalAlpha 属 性 : 

context.globalAlpha = 0.5; 

// 此 时 ， 再 设置 的 颜色 不 透明 度 值 都 将 是 0.5 

context.fillStyle = "rgb(100,150,185)"; 

这 样 一 来 , 后 续 所 有 绘图 操作 都 会 取得 相同 的 不 透明 上 度 值 ， 也 就 是 会 有 相同 的 透明 度 ( 下 至 
骨 次 修改 globalAlpha 属 性 )。 包 括 描 边 颜色 和 填充 闫 色 。 

哪 种 方式 更 好 一 些 呢 ?” 如 末 你 只 需要 一 种 透明 的 颜色 ,使 用 rgba() 就 好 了 。 如 果 你 需要 使 用 
不 同 的 颜色 绘制 很 多 形状 ， 但 每 个 形状 的 透明 度 不 一 样 ， 可 以 使 用 globalAlpha。 夯 外 ， 如 采 你 
想 在 <canvas> 上 绘制 半 透 明 的 图 像 ， 也 要 用 到 globalAlpha 属 性 〈 人 参见 7.1 )。 














本 草 到 现在 一 直 假 设 在 绘制 多 个 图 形 时 , 后 绘制 的 图 形 会 位 于 先 绘制 的 图 形 上 方 , 并 遮 住 
先 绘制 的 图 形 。 使 用 <canvas> 绘 图 时 ， 多 数 情 况 下 都 是 这 样 的 。 然 而 , 《canvas> 也 支持 更 复杂 
的 合成 操作 。 

所 谓 合成 操作 ， 就 是 告诉 <canvas> 怎 么 显示 两 个 重合 的 图 形 。 默 认 的 合成 操作 是 
Source-oveT， 即 后 绘制 的 图 形 会 位 于 先 绘制 的 图 形 上 方 。 但 除 此 之 外 ， 还 有 其 他 很 多 种 合成 
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方式 。 例 如 xor， 告 诉 <canvas> 不 显示 两 个 图 形 相 互 重 登 的 部 分 。 图 6-10 展 示 了 不 同 合成 操作 
的 结 采 。 

要 改变 <canvas> 当 前 使 用 的 合成 操作 方式 ， 只 要 像 下 面 这 样 设置 绘图 上 下 文 的 global- 
CompositeOperation 属 性 即 可 : 

context.globalCompositeOperation = "xor"; 

只 要 运用 得 当 , 利用 合成 操作 可 以 迅速 实现 一 些 特 定 的 绘图 任务 。 可 惜 的 是 ,不 同 浏览 器 
对 合成 操作 的 结果 并 没有 达成 一 致 。 因 此 , 同一 种 合成 操作 在 不 同 浏览 器 中 可 能 会 出 现 不 同 的 
结果 。 要 了 解 这 个 问题 以 及 不 同 浏览 器 间 的 差异 , 请 参考 这 篇 博客 : http://tinyurl.com/68b2nmz。 


图 6-10: 这 里 是 12 种 可 能 的 合成 操作 及 其 在 Firefox 

浏览 器 中 的 效果 ,IE9 和 Opera 对 copy 操 作 的 理解 不 
e^ lola 同 ， 和 而 Chrome 和 Safari 在 source-in、source-out、 

destination-in 和 destination-atop 这 几 个 操作 上 


source-over source-in source-out source-atop 也 持 不 同 看 法 
/ 


SS 


destination-over destination-in destination-out destination-atop 


lighter darker copy XOT 





6.2. 构建 基本 的 画图 程序 


要 介绍 的 <canvas> 的 功能 还 有 很 多 。 不 过 ， 经 过 本 音 到 现在 的 学 习 ， 我 们 已 经 有 足够 的 基础 
知识 构建 一 个 基于 <canvas> 的 画图 程序 了 。 图 6-11 就 是 本 市 我 们 要 构建 的 基本 的 画图 程序 。 

实现 这 个 程序 的 JavaScript 代 人 码 比 我 们 前 面 看 到 的 所 有 代码 都 要 长 ,但 实际 上 却 仍 然 非常 好 理 
解 。 接 下 来 几 小 市 ， 我 们 就 逐一 分 析 每 一 段 代 人 码 。 








提示 如果 有 读者 想 知 道 是 哪些 样式 规则 创建 了 图 中 <canvas> 上 下 方 的 蓝 色 工具 栏 ， 那 么 最 好 
是 浏览 一 下 完整 的 代码 。 如 果 你 只 想 在 自己 的 浏览 器 中 试验 一 下 这 个 画图 程序 ， 可 以 打 
开 我 们 试验 站 点 ( www.prosetech.com/html5 ) 上 的 Paint.html。 
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图 6-11: 要 在 这 个 程序 中 国 图 ， 先 选择 


SJOE MSchapte P- cx|@@pan 中 | 9:9 *| 一 种 颜色 ， 再 选择 笔画 粗细 ， 然 后 就 晃 
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6.2.1 准备 工作 


首先 ， 当 页 面 加 载 后 ， 脚 本 代码 会 取得 ccanvas> 对 象 ， 为 它 添加 一 些 人 处理 函数 ， 以 便 处 理 不 
同 鼠 标 操作 导致 的 JavaScript 事 件 : onMouseDown 、onMouseUp 、onMouse0ut 和 onMouseMove。( 稍 后 你 
就 会 看 到 ， 我 们 正 是 通过 这 些 事 件 来 控制 绘图 过 程 的 。) 与 此 同时 ， 代 码 也 把 <canvas> 保 存在 了 
一 个 全 局 变量 中 ( 变量 名 为 canvas )， 把 绘图 上 下 文保 存在 了 为 一 个 全 局 变量 中 ( 变量 名 为 
context )。 任 何 位 置 的 代码 都 能 轻 多 访问 到 全 局 变量 : 


var canvas; 
var context; 





window.onload = function() { 
// 取 得 kcanvas> 和 绘图 上 下 文 
canvas = document.getElementById("drawingCanvas"); 
context = canvas.getContext ("2d"); 


// 添 加 用 于 实现 绘图 操作 的 事件 处 理 程序 
canvas.onmousedown = startDrawing; 
canvas.onmouseup = stopDrawing; 
canvas.onmouseout = stopDrawing; 
canvas.onmousemove - draw; 


rj 


158 | 第 6 章 基本 Canvas 绘图 


有 要 想 开始 画图 , 首先 要 从 窗口 项 部 的 两 个 工具 栏 中 选择 笔画 颜色 和 笔画 粗细 。 这 两 个 工具 栏 
就 是 两 个 cdiv> 元 素 ， 通 过 样式 给 它们 添加 了 熟悉 的 铁 青色 背景 ， 还 有 边框 。 工 具 栏 中 包含 一 些 
可 以 点 击 的 图 像 (<img> 元 素 ) 例如 ， 以 下 就 是 供用 户 选择 3 种 颜色 的 工具 栏 的 标记 : 

«div class-"Toolbar"» 

= Pen Color -<br> 

«img id-"redPen" src-"pen red.gif" alt-"Red Pen" 
onclick-"changeColor('rgb(212,21,29)', this)"> 

«img id-"greenPen" src-"pen green.gif" alt-"Green Pen" 
onclick-"changeColor('rgb(131,190,61)', this)"> 

«img id-"bluePen" src-"pen blue.gif" alt-"Blue Pen" 
onclick-"changeColor('rgb(0,86,166)', this)"» 

</div> 


以 上 标记 中 的 重点 在 于 每 个 <img> 元 素 的 onclick 属 性 。 访 客 单 击 每 幅 图 像 时 ， 都 会 调用 与 
<img> 元 素 绑 定 的 changeColor() 玉 数 。 这 个 枯 数 接收 两 个 参数 : 与 图 标 颜 色 匹 配 的 新 颜色 和 对 被 
单 击 的 <img> 元 素 本 身 的 引用 。changeColor() 郴 数 的 代码 如 下 : 


// 记 录 此 前 为 选择 颜色 而 被 单 击 过 的 <img> 元 素 
var previousColorElement; 


























function changeColor(color, imgFlement) { 
// 重 新 设置 当前 绘图 要 使 用 的 颜色 
context.strokeStyle = color; 
// 为 刚 被 单 南 的 <img> 元 素 应 用 一 个 新 样式 
imgElement.className = "Selected"; 


// 恢 复 上 一 次 被 单 击 的 <img> 元 素 的 样式 
if (previousColorElement !- null) previousColorElement.className = ""; 
previousColorElement = imgElement; 


Jj 

jx changeColor()PAAICfA EMADE: 首先 ， 将 绘图 上 下 文 的 strokeStyle 属 性 设置 为 
新 的 颜色 值 。 这 只 需 一 行 代 但 就 够 了 了。 其 次 ,改变 被 单 击 的 <img> 元 素 的 样式 ， 即 添加 实心 边框 ， 
以 便 明确 显示 当前 绘图 所 使 用 的 颜色 。 这 个 任务 用 一 行 代码 就 不 行 了 。 因 此 不 仪 要 记录 上 一 次 选 
择 的 图 像 〈 颜色 )， 而 且 还 要 去 抒 该 图 像 的 边框 。 

接 下 来 的 changeThickness() 函 数 几 乎 与 changeColor() 完 全 相同 ， 唯 一 的 区 别 就 是 它 要 修改 
绘图 上 下 文 的 linewidth 属 性 ， 以 保证 绘图 以 适当 粗细 的 笔画 进行 。 


// 记 录 此 前 为 选择 粗细 而 被 单 击 过 的 <img> 元 素 
var previousThicknessElement; 








function changeThickness(thickness, imgElement) 1 


// 重 新 设置 当前 绘图 要 使 用 的 粗细 
context.lineWidth = thickness; 


// 为 刚 被 单 击 的 <img> 元 素 应 用 一 个 新 样式 
imgElement.className = "Selected"; 


// 恢 复 上 一 次 被 单 击 的 <img> 元 素 的 样式 
if (previousThicknessElement !- null) { 
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previousThicknessElement.className = "^"; 


j 


previousThicknessElement - imgElement; 


} 
没 错 ， 这 些 代 码 没 有 执行 任何 实际 的 绘图 操作 ， 我 们 的 例子 还 没有 做 完 。 接 下 来 的 ( 最 后 ) 
一 步 ， 就 是 添加 实际 绘图 的 代码 。 





6.2.2 ”在 画布 上 绘图 


绘图 操作 从 用 户 在 画布 上 按 下 鼠标 时 开始 。 我 们 这 个 画图 程序 使 用 了 一 个 名 为 isDrawing 的 
全 局 变量 ， 记 录 绘 图 什么 时 候 开 始 ， 以 方便 其 他 代码 知悉 是 否 该 通过 绘图 上 下 文 进行 绘制 。 

在 前 面 的 代码 中 ,我 们 看 到 onMouseDown 事 件 是 与 startDrawing() 痕 数 绑 定 的 。 这 个 函数 首先 
将 isDrawing 变 量 设 置 为 true， 然 后 创建 新 路 径 ， 找 到 起 点 位 置 ， 并 作 好 绘制 准备 。 


var isDrawing = false; 











function startDrawing(e) ( 
// 开 始 绘图 了 
isDrawing = true; | 
// 创 建新 路 径 (使 用 当前 设置 好 的 描 边 颜色 和 线条 粗细 和) 
context.beginPath(); 


// 把 画笔 放 到 和 鼠标 当前 所 在 位 置 
context.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop); 


} 

为 了 证 画图 程序 正确 运行 , 应 该 在 鼠标 当前 所 在 位 置 开 始 绘制 。 鼠 标 当 前 所 在 位 置 ， 就 是 用 
户 在 画布 上 单 击 鼠 标的 位 置 。 不 过 ， 取 得 这 个 位 置 的 坐标 还 要 费 点 小 周折 。 

onMouseDown 事 件 本 身 提 供 了 坐标 ( 如 代码 所 示 ， 通 过 事件 对 象 的 pageX 和 pageY 属 性 )， 但 这 
两 个 坐标 值 是 相对 于 整个 页 面 的 。 而 我 们 需要 的 是 相对 画布 左上 角 的 坐标 值 ， 所 以 需要 青 减 去 浏 
览 大 左上 角 到 画布 左上 角 的 距离 。 

实际 的 绘图 操作 要 等 到 用 户 移动 鼠标 的 时 候 再 开始 。 用 户 每 次 移动 鼠标 , 哪怕 只 移动 了 一 个 
像素 ， 都 会 触发 onMouseMove 事 件 并 执行 draw() 函 数 。 此 时 ， 如 果 isDrawing 的 值 为 true，draw() 
国 数 就 会 计算 当前 画布 坐标 ( 即 鼠 标 最 新 位 置 的 坐标 )， 然 后 调用 lineTo() 在 画布 上 绘制 极 小 的 
一 段 线段 ， 最 后 再 调用 stroke() 把 线条 实际 地 绘制 出 来 : 


function draw(e) { 
if (isDrawing -- true) { 
// 找 到 鼠标 的 新 位 置 
Var x = e.pageX - canvas.offsetLeft; 
var y = e.pageY - canvas.offsetTop; 



































// 画 一 条 到 新 位 置 的 线 
context.lineTo(x, y); 
context.stroke(); 
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最 后 ， 用 户 释 放 忌 标 时 ,或 者 把 光标 移动 到 画布 外 面 时 ， 就 会 触发 onMouseUp 或 onMouseOut 
事件 。 这 两 个 事件 都 会 触发 同一 个 阴 数 : stopDrawing()， 这 个 孔 数 告诉 程序 停止 绘图 . 


function stopDrawing() { 
isDrawing = false; 











关于 这 个 简单 的 画图 程序 的 代码 ,到 这 里 已 经 差不多 介绍 完了 。 所 剩 的 就 是 画布 下 方 的 那 两 
个 按钮 , 一 个 按钮 用 于 保存 当前 作品 ， 男 一 个 按钮 用 于 清除 画布 。 单 击 清 除 按 钮 ，clearCanvas() 
男 数 会 清空 整个 画布 ， 使 用 的 是 绘图 上 下 文 的 ClearRect() 方 法 : 


function clearCanvas() { 
context.clearRect(O, 0, canvas.width, canvas.height); 











而 保存 操作 更 有 意思 ， 因 此 下 一 市 我 们 就 讨论 如 何 实 现 保 存 为 图 像 的 操作 。 


6.2.8 ”将 画布 保存 为 图 像 


说 到 把 画布 保存 为 图 像 的 方法 , 那 可 是 太 多 了 。 选择 什么 方法 ,首先 取 决 于 你 怎么 取得 相应 
的 数据 。<canvas> 元 条 提供 了 三 个 基本 的 选项 。 

O 使 用 数据 URL。 这 样 会 把 画布 转换 为 一 幅 图 像 文 件 ， 然 后 将 图 像 数 据 转 换 为 字符 序列 并 
编码 为 URL 形 式 。 这 种 方式 生成 的 数据 URL 非 常 适 合 传输 图 像 ( 例如 ， 可 以 将 数据 URL 
作为 <img> 元 系 的 src 属性 值 ， 或 者 也 可 以 将 其 发 送 到 Web 服 务 送 )。 我 们 的 画图 程序 就 使 
用 这 种 方法 。 

O 使 用 getImageData() 方 法 。 这 样 会 取得 原始 的 像素 数据 ,然后 可 以 继续 根据 需要 操作 这 些 
数据 。 关 于 getImageData() 方 法 ， 我 们 会 在 7.5.3 节 介绍 。 

O 保存 一 组 “步骤 ”。 比 如 ， 可 以 把 在 画布 上 绘制 的 每 一 条 线 都 保存 到 一 个 数组 中 。 然 后 ， 
保存 这 个 数组 ， 以 便 将 来 根据 该 数组 重新 绘制 图 像 。 这 个 方法 不 占 空间 ， 而 且 更 具有 灵活 
性 ， 方 便 以 后 编辑 图 像 。 但 是 ， 前 提 是 你 必须 记录 每 一 步 操 作 ， 而 相关 的 技术 将 在 7.3.1 
PTA o 

T oue EBARA RE3EAEHBE TY, 请 再 坚持 一 小 会 儿 ， 我 们 还 没 结束 。 确定 了 要 保存 

什么 之 后 ， 接 下 来 还 要 决定 保存 到 哪儿 。 而 这 又 有 三 种 选择 。 

D 保存 为 图 像 文件 。 例如 ,可 以 让 用 户 把 画布 以 PNG 或 JPEG 图 像 格式 保存 在 自己 的 人 硬盘 上 。 
这 也 是 我 们 选择 的 方式 。 

口 保存 在 本 地 存储 系统 中 。 相 关内 容 将 在 第 9 曹 介绍。 

O 保存 在 Web 服 务 器 上 。 在 把 数据 发 送 到 Web 服 务 硕 后 , 服务 融 端 程序 可 以 把 它 保存 到 文件 
里 ， 也 可 以 保存 到 数据 库 中 。 这 样 ， 当 用 户 下 次 访问 相同 页 面 时 ， 还 可 以 旋 取 到 以 前 的 
绘图 记录 。 
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为 了 给 画图 程序 增加 保存 功能 ,我 们 使 用 数据 URL 的 方案 。 要 取得 当前 数据 的 URL， 必 须 通 
过 画布 对 象 调用 toDataURL() 方 法 : 
var url = canvas.toDataURL(); 


在 调用 toDataURL() 方 法 时 如 果 不 提供 参数 ， 得 到 的 将 是 一 个 PNG 图 片 。 如 果 你 想 要 其 他 格 
式 的 图 片 ， 可 以 传人 相应 的 MIME 类 型 : 

var url = canvas.toDataURL(" image/jpeg"); 

不 过 , 假如 浏览 器 不 支持 你 想 要 的 格式 , 它 仍然 会 发 给 你 一 个 PNG 文 件 ， 一 个 转换 后 的 长 长 
HU ETE 

数据 URL 到 底 是 什么 ?从 技术 角度 讲 ， 数 据 URL 就 是 一 个 以 data:image/png;base64 开 头 的 
base-64 编 码 的 字符 串 。 这 个 字符 串 很 长 ， 不 过 不 要 么 ,因为 数据 URL 是 要 给 计算 机 程序 (如 浏览 
AS) 看 的 。 以 下 就 是 当前 画布 图 片 的 数据 URL: 


data: image/png;base64,iVBORwOKGgoAAAANSUhEUgAAAfQAAAE sCAYAAAA1uOHIAAAAAXNSR 
OIArs4c6QAAAARnQU1BAACx jwv 8 YQUAACqRSURBVHhe7Z1bkB1Hecdn5uxF FzA2FWOnsEEGiiew 
nZgKsrWLrZXMRU9JgZQKhoSHVK. . . gAAEIQAACEIBAiAT-«*HxAYpeqDfKieAAAAAEIFTkSuOmCC 


为 了 节省 版面 ， 这 里 代码 的 中 间 省 略 了 大 量 字符 〈 注 意 省 略 号 ) 如 末 一 点 不 落地 都 放 在 这 
儿 ， 怒 怕 得 占用 本 书 这 样 的 5 页 篇 幅 。 




















注意 ”Base-64 编 码 是 一 种 将 图 像 数据 转换 成 长 字符 串 的 编码 方法 ， 长 字符 串 由 字符 、 数 字 及 人 少 
量 特殊 字符 组 成 。 由 于 编码 后 的 字符 事 不 包含 标点 符号 和 所 有 专用 扩展 字符 ， 所 以 结果 
可 以 安全 地 用 在 网 页 中 (例如 ， 作 为 隐藏 输入 字段 的 value 或 <img> 元 素 的 src 属 性 值 )。 








总 之 ,很 容易 把 男 布 转换 为 数据 URL 形 式 的 图 像 数据 。 但 有 了 数据 URL 之 后 ， 又 能 用 它 来 做 
什么 呢 ? 一 种 处 理 方式 是 将 它 发 送 给 Web 服 务 硕 长 期 保存 。 这 里 有 一 篇 文章 ,讲解 了 只 用 少量 PHP 
脚本 即 可 实现 上 述 目 的 的 方法 : http:/tinyurl.com/Suud9ob。 

如 宁 你 只 想 把 数据 保存 在 客户 端 , 那 方法 并 不 太 多 。 有 些 浏 览 硕 文 持 直接 访问 数据 URL,， 也 
就 是 可 以 使 用 下 面 这 样 的 代码 直接 打开 图 像 : 

window.location = canvas.toDataURL(); 

而 更 可 靠 的 方法 则 是 把 数据 URL 交 给 一 个 <img> 元 素 。 下 面 就 是 我 们 画图 程序 的 处 理 代 码 ( 见 
图 6-12 ): 


function saveCanvas() { 
// 找 到 《img> 元 素 
var imageCopy = document.getElementById("savedImageCopy"); 














// 在 图 像 中 显示 画布 数据 
imageCopy.src = canvas.toDataURL(); 


// 显 示 包 含 <img> 元 素 的 <div>， 以 便 把 图 像 显 示 出 来 
var imageContainer = document.getElementById("savedCopyContainer"); 


162 | 第 6 章 基本 Canvas 绘图 


imageContainer.style.display = "block"; 
} 





b — c9» 6-12: 在 此 ， 我 们 使 用 数据 URL 把 画布 中 的 信 
KO [E Panthtm p-2X|]8»« JA xw 





息 传递 给 了 <img> 元 素 。 我 们 把 cimg> 元 素 的 尺寸 
cao oo 设置 得 比较 小 ， 以 区 别 于 画布 。 如 果 想 把 图 像 
FKfAgnp!--9o0 保存 为 .png 文 件 ， 只 要 在 图 像 上 单 击 右键 ， 选 择 
| “图 片 另存 为 ” 即 可 一 一 与 保存 网 页 中 的 其 他 图 
像 一 样 

















- OPERATIONS - 
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RIGHT-CLICK TO SAVE ... 





























以 上 代码 并 没有 真 的 “保存 ”图 像 数 据 ， 因 为 图 像 不 会 长 期 保存 ( 比如 保存 为 一 个 文件 )。 
然而 ， 对 于 显示 在 网 页 中 的 图 像 ， 只 要 简单 操作 两 下 就 可 以 保存 下 来 了 。 这 个 大 家 部 知 道 ， 在 图 
像 上 单 击 右键 , 选择 “图 片 为 存 为 ”就 好 了 。 虽然 这 样 不 如 下 载 文 件 或 弹出 “保存 ”对 话 框 方便 ， 
但 却 是 在 所 有 浏览 融 中 都 能 可 靠 使 用 的 唯一 一 个 客户 端 方案 。 

















注意 Firefox 内 置 支持 把 画布 内 容 保存 为 文件 。 只 要 在 《canvas> 元 素 上 ( 而 不 是 下 面 的 小 图 像 上 ) 
单 击 右键 ， 然 后 选择 “图 片 另存 为 。 而 Chrome、IE 等 浏览 器 则 没有 提供 此 功能 。 


注意 ”如 果 你 是 在 本 地 计算 机 硬盘 上 运行 自己 的 试验 页 面 ， 那么 数据 URL 功 能 会 失效 -<canvas> 
的 其 他 几 项 功能 也 是 如 此 ,为 了 避免 出 现 这 个 问题 , 需要 把 试验 页 面 上 传 到 Web 服 务 器 后 再 
打开 。 
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网 页 版 Canvas 绘 图 程序 
当 大 家 开始 学 习 <canvas> 时 , 首先 想到 的 就 是 用 它 来 开发 绘图 程序 。 因 此 , 在 谷歌 里 一 搜 ， 
很 容易 就 能 找到 一 些 这 样 的 绘图 程序 ， 有 的 还 支持 很 多 高 级 功能 。 以 下 是 几 个 例子 。 

口 http;//canvaspaint.org/! , 企图 在 浏览 器 中 再 造 经 典 的 Windows XP 版 和 画图 , 功能 比较 完整 ， 
但 有 些 菜单 已 经 过 时 ， 而且 包 含 一 些 公共 域 代 码 ， 可 以 自由 使 用 。 

口 http:/www.jswidget.com/index-ipaint.html。 相 对 更 完善 的 一 个 绘图 程序 ,与 最 新 的 Windows 
画图 很 相似 。 作 者 在 完成 这 个 试验 项 目 后 ， 打 算 做 一 个 浏览 器 版 Adobe Photoshop. 

口 http:/mugtug.com/sketchpad。 令 人 吃惊 的 绝妙 绘图 程序 ， 支 持 形 状 、 框 选 、 内 螺旋 等 高 
级 插画 功能 。 目 前 还 不 支持 IE。 


6.3 浏览 器 对 Canvas 的 支持 情况 


关于 Canvas， 我 们 已 经 介绍 了 很 多 东西 了 。 现 在 该 面 对 现 实 ， 回 答 那 个 关系 到 每 个 HTML5S 
新 功能 的 问题 了 一 一 什么 时 候 可 以 放心 使 用 ? 

我 们 很 钼 运 ，Canvas 是 目前 得 到 较 好 支持 的 HTML5 功 能 。 主 流 浏览 磊 的 所 有 最 新 版 本 都 支 
持 它 ， 如 表 6-1 所 示 。 当 然 ， 剂 览 带 版 本 越 遇 ， 文 持 得 就 越 好 。 而 且 ， 新 版 本 浏览 带 还 进一步 提 
高 了 绘图 速度 ， 修 复 了 一 些 偶 尔 出 现 的 小 问题 。 

表 6-1 浏览 器 对 Canvas 的 支持 情况 
IE Firefox Chrome Safari Opera Safari iOS Android 
最 低 版 本 9 3.5 3 4 10 1 1 








除了 正之 外 , 很 少 有 人 会 使 用 其 他 浏览 器 的 旧版 本 。 而 这 正 是 今天 Canvas 用 户 最 关心 的 问题 : 
怎样 才能 既 在 网 页 中 使 用 ccanvas>， 又 能 保证 不 把 IE7 和 下 8 这 两 款 依然 健在 的 浏览 器 排除 在 外 ? 

与 许多 其 他 HTML5 功 能 一 样 ， 为 了 保证 兼容 性 ， 我 们 有 两 个 选择 。 第 一 个 选择 是 检测 浏览 
器 是 否 支 持 新 功能 ， 不 支持 则 提供 后 备 内 容 。 第 二 个 选择 是 利用 第 三 方 工具 来 模仿 HTML5 的 
<canvas>， 做 到 同一 个 页 面 也 能 在 旧版 本 浏览 融 中 和 运行。 具体 到 <canvas>， 第 二 个 选择 是 首选 ， 
稍 后 我 们 会 介绍 原因 。 














6.3.4 填 平 从 齐 Canvas 


为 了 让 过 时 的 老 版 本 正文 持 类 似 Canvas 的 功能 ， 出 现 了 很 多 徘 谱 的 方案 。 较 早 的 一 个 是 
ExplorerCanvas 库 ( 即 excanvas )， 由 谷歌 工程 师 、JavaScript 天 才 Erik Arvidsson 开 发 。 这 个 库 能 在 
IE7 和 IE8 中 模仿 HTML5 Canvas, ， 完 全 使 用 JavaScript， 还 有 目前 已 经 不 大 流行 的 VML ( Vector 
Markup Language， 矢 量 标记 场 言 ) 技术 。 




















注 1: 翻译 本 书 时 ， 这 个 网 站 似乎 已 经 打 不 开 了 。( 译 者 注 ) 
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注意 VML 是 一 种 针对 在 HTML 文 档 中 使 用 标记 创建 线 框 图 及 插图 的 标记 语言 规范 。 目 前 ， 已 
经 被 与 之 相似 但 支持 情况 更 好 的 标准 SVG (Scalable Vector Graphics， 可 伸缩 矢量 图 ) 所 
取代 ，SVG 正 开始 得 到 浏览 器 的 广泛 支持 。VML 在 微软 的 某 些 产品 ( 比如 Microsoft Office 
PIE) 中 仍然 可 以 使 用 。 因 此 ， 虽 然 其 他 浏览 器 支持 不 好 ， 但 在 IE 浏览 器 中 用 它 来 模仿 
Canvas RÆ RIS R.o 


ExplorerCanvas 最 新 版 本 的 下 载 地 址 是 http:/code.google.com/p/explorercanvas 。 下 和 载 后 ， 把 
excanvas.js 文 件 复制 到 网 页 所 在 目录 ， 然 后 在 网 页 中 引用 它 就 可 以 了 : 


«head» 
«title»...«/title» 
«1--[if lt IE 9]» 
«script src-"excanvas.js"»«/script» 
«I[endif]--» 








T 

XEEN TIERA., RAFTERS EHE, IE9KIEEN V3 8 zz 20. AA 
脚本 。 

此 后 ， 再 使 用 <canvas> 基 本 上 就 没有 后 顾 之 忧 了 。 实 际 上 ， 引 入 这 个 脚本 之 后 ， 我 们 前 面 开 
发 的 画图 程序 ( 见 6.2 市 ) 在 旧版 本 的 正中 也 可 以 运行 。 








注意 ”如果 你 想 在 Canvas 上 绘制 文本 (7.1.3 节 介绍 )， 那 还 需要 第 二 个 JavaScript 库 的 支持 ， 那 就 
是 Canvas-text ， 它 与 ExplorerCanvas 可 以 协同 工作 。 Canvas-text 的 下 载 地 址 为 
http://code.google.com/p/canvas-text/。 


当然 ，ExplorerCanvas 也 不 是 完美 无 缺 的 。 如 果 你 想 使 用 高 级 的 Canvas 绘 图 功能 ， 可 能 就 会 
引发 一 些 错 误 。ExplorerCanvas 不 支持 一 些 主要 功能 (应 该 说 ， 在 编写 本 书 时 还 不 支持 的 功能 ) 
包括 放射 渐变 、 阴 影 、 盘 切 区 域 、 原 始 像素 处 理 和 数据 URL。 

如 果 你 的 要 求 很 高 ( 比如 ， 也 许 你 想 创建 复杂 的 动画 或 横向 卷轴 游戏 )，ExplorerCanvas 的 性 
能 灵 ， 人 无 法 满足 需要 。 在 这 种 情况 下 ， 建 议 你 考虑 其 他 基于 高 性 能 浏览 融 搬 件 (如 Silverlight 或 
Flash ) 的 JavaScript 库 。GitHub 上 有 一 个 页 面 ， 地 址 是 http:/Wtinyurl.com/polyfills ， 其 中 列 出 了 几乎 
所 有 可 供 选 择 的 JavaScript 秆 丁 库 。 其 中 哪个 最 好 ?现在 就 可 以 推荐 一 个 人 免费 的 库 : FlashCanvas, 
下 载 地 址 是 http://flashcanvas.net/purchase 。 与 ExplorerCanvas 类 似 ， 要 使 用 FlashCanvas， 只 需 一 行 
脚本 。 但 与 ExplorerCanvas 不 同 的 是 ，FlashCanvas 依 赖 Flash 插 件 ， 而 不 使 用 VML。 

FlashCanvas 还 有 一 个 更 完善 的 专业 版 FlashCanvas Pro。 这 个 专业 版 对 Canvas 的 支持 更 好 一 一 种 
实 上 ,Canvas 兼 容 性 测试 显示 , 它 已 经 达到 了 与 其 他 主流 浏览 厚 相 当 的 水 平 。 要 使 用 FlashCanvas Pro, 























注 1: 原 书 给 出 的 下 载 地 址 是 http://code. google. Conmypy/flashcanvas ， 但 该 网 站 可 能 已 经 不 存在 。( 编者 注 ) 
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可 能 得 花 一 笔 小 钱 ( 目前 是 31 美 元 ), 购买 链接 为 http://flashcanvas.net/purchase。 至 于 ExplorerCanvas、 
FlashCanvas 与 FlashCanvas Pro 对 Canvas 的 支持 情况 对 比 ， 可 以 参考 这 个 页 面 : http://flashcanvas. 


net/docs/canvas-apl。 


注意 使 用 FlashCanvas 开 发 基于 Canvas 的 应 用 ， 能 够 在 如 今 几乎 所 有 的 浏览 器 中 得 到 最 好 的 支 
持 。 不 仅 能 通过 Flash 获 得 版 本 老 一 些 的 下 的 支持 ， 而 且 在 不 支持 Flash 的 iPad、iPhone 等 
移动 设备 上 ， 同 样 能 通过 HTML5 获 得 原生 支持 。 


6.3.2 Canvas 后 备 及 功能 检测 


扩展 网 页 对 Canvas 文 持 的 最 流行 方案 是 使 用 ExplorerCanvas 和 FlashCanvas。 但 它们 并 不 是 唯 
一 的 方案 。 

E p—34r2dlj«audio»fli«video»762& — E, «canvas»76 ZR ZR AH RSV. Hd, F 
列 代码 表示 可 以 在 浏览 器 支持 的 情况 下 使 用 <canvas>， 而 在 不 支持 的 情况 下 显示 网 像 : 


«canvas id-"logoCreator" Width= 500 ” height= 300 > 
<p>The canvas isn't supported on your computer, so you can't use our 
dynamic logo creator.«/p» 
«img src-"logo.png" alt-" Standard Company Logo > 

«/canvas» 


这 种 方案 当然 是 聊 胜 于 无 。 多 数 时候 ， 我 们 会 利用 <canvas> 绘 制 一 些 动态 图 像 ， 或 者 创建 一 
些 基于 图 形 的 交互 应 用 , 在 这 种 情况 下 只 显示 一 幅 静 态 图 像 ， 显 然 于 事 无 补 。 为 此 ， 更 好 的 办 法 
是 在 <canvas> 元 系 中 航 入 Flash 应 用 。 这 个 办 法 对 已 经 有 了 Flash 版 ， 又 想 迁 移 到 <canvas> 以 适应 未 
来 发 展 的 应 用 非常 合适 。 这 样 ， 既 有 满足 老 版 本 IE 浏览 器 的 Flash 应 用 ， 又 可 以 让 其 他 人 安心 使 用 
无 插件 的 ccanvas> 版 。 

如 果 你 使 用 Modernizr ( 参见 1.6.3 节 )， 还 可 以 在 JavaScript 代 码 中 检测 浏览 器 是 否 支 持 
<canvas>。 为 此 ， 只 要 检测 Modernizr.canvas 属 性 即 可 。 而 要 检测 浏览 需 是 否 文 持 文本 绘制 功能 
(后 来 才 添 加 的 Canvas 绘 图 功能 )， 可 以 检测 Modernizr.canvastext 属 性 。 如 果 你 不 想 检 测 浏览 名 
对 <canvas> 的 支持 情况 ， 可 以 选择 任何 目 己 喜欢 的 JavaScript 引 丁 库 。 





























无 障碍 的 Canvas 
是 否 可 以 让 残疾 人 无 障碍 地 访问 Canavs? 
语义 元 素 是 HTML5 的 重头 戏 , 而 本 书 之 前 几 章 也 一 直 在 强调 无 障碍 性 ， 即 在 设计 页 面 时 ， 
就 要 考虑 为 残疾 人 使 用 的 辅助 上 网 工具 提供 信息 ， 以 方便 残疾 人 使 用 你 的 网 站 。 一 路 下 来 ， 突 
然 冒 出 了 另 一 个 HTMLS 中 头等 重要 的 元 素 ， 但 它 却 没 有 语义 ， 也 不 支持 无 障碍 访问 。 
HTMLS 的 制定 者 正在 积极 考虑 弥补 这 个 问题 。 然 而 ， 什 么 方案 最 好 ， 目 前 还 没有 定论 。 
有 人 建议 为 辅助 上 网 工具 单独 生成 一 个 文档 ,该 文档 完全 镜像 Canvas 的 内 容 。 可 问题 在 于 , 这 
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个 镜像 文档 终归 还 要 让 网 页 作者 生成 ， 这 个 “影子 ”文档 能 否 与 可 见 内 容 同 步 ， 就 会 因 作 者 而 
异 。 如 果 创 建 镜 像 文 档 很 麻烦 , 那么 想 偷 懒 的 人 , 或 者 手头 活 太 多 的 人 可 能 就 会 对 其 教 衍 了 事 、 
JE Sp E, 

另 一 种 意见 是 扩展 图 像 地 图 (已 有 的 一 种 HTML 功 能 ,， 可 以 把 一 张 图 像 切 分 成 多 块 可 单 击 
的 区 域 )， 以 便 将 其 作为 独立 的 一 层 放 在 Canvas 上 面 。 由 于 图 像 地 图 本 质 上 就 是 一 组 链接 ， 所 
以 可 以 在 其 中 保存 重要 信息 ， 供 辅助 上 网 工具 读 取 并 传达 给 残疾 用 户 。 

目前 来 看 ， 对 这 两 种 意见 我 们 只 能 姑 亡 听 之 ， 因 为 都 还 停留 在 讨论 阶段 。 在 此 期 间 ， 你 尽 
管 使 用 Canvas 去 实现 各 种 图 形 开 发 任务 , 比如 大 型 电子 游戏 ( 电子 游戏 实际 上 并 不 能 做 到 无 障 
ER), 或 者 数据 可 视 化 (只 要 相关 数据 有 文本 格式 ,就 可 以 做 到 无 障碍 ), 但 是 ,不 能 把 Canvas 
当做 一 个 通用 万 能 的 页 面 设计 元 素 。 换 和 句 话说, 如 果 你 只 想 用 它 来 创建 一 个 新 奇 的 标题 或 者 网 
站 导致 菜单 ， 我 劝 你 还 是 省 省 吧 ， 最 好 现在 就 打消 这 个 念头 。 
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高 级 Canvas 技 术 


anvas 功 能 十 分 庞大 ， 而 且 还 在 逐步 发 展 。 上 一 章 ， 我 们 学 习 了 如 何 绘制 直线 ， 乃 至 使 
用 为 数 不 多 的 JavaScript 代 码 开 发 一 个 还 像 那 么 回 事 儿 的 画图 程序 。 可 是 ，Canvas 本 刁 
的 功能 还 远 不 止 这 些 。 使 用 它 不 仅 能 显示 动态 图 片 、 开 发 画 网 工具 ,还 可 以 播放 动画 、 在 像素 级 
别 上 处 理 图 像 ， 甚 至 基于 它 创建 交互 游戏 。 这 一 曹 ， 我 们 介绍 上 述 所 有 功能 的 实际 应 用 。 
首先 ,我 们 从 绘图 上 下 文 支持 的 绘制 图 像 和 文本 的 不 同方 法 讲 起 ,然后 讨论 为 图 像 添加 阴影 、 
使 用 图 和 案 和 新 变 填充 。 最 后 ， 学 习 为 Canvas 添 加 交互 功能 ， 以 及 通过 它 实 现 动画 效果 。 最 关键 的 
是 ， 实 现 这 些 功 能 只 要 编写 基本 的 JavaScript 代 码 即 可 ， 当 然 还 要 有 你 的 创意 。 














章 前 半 部 分 重点 分 析 小 段 的 绘图 代码 。 你 可 以 把 这 些 代码 直接 放 到 自己 的 网 页 中 ， 但 
忘 了 在 页 面 中 添加 相应 的 <canvas> 元 素 ， 以 创建 绘图 上 下 文 (参见 6.1 节 )。 本 章 后 半 部 
分 讲解 更 复杂 的 任务 ， 书 中 会 给 出 相关 示例 的 大 部 分 (或 全 部 ) 绘图 代码 ， 但 不 会 给 出 
每 个 页 面 的 标记 代码 。 如 果 你 想 自己 动手 试验 这 些 例 子 ， 请 访问 本 书 试验 站 点 


www.prosetech.com/html5 。 
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7.1 高 级 Canvas 绘图 


使 用 Canvas 可 以 绘制 你 能 想到 的 任何 图 形 , 无 论 是 线条 、 三 角形 , 还 是 着 色 讲 究 的 人 物 系 描 。 
但 绘图 任务 越 复 淋 ,代码 自然 也 越 复杂 。 很 多 时 候 ， 要 得 到 精细 的 最 终结 采 ， 徘 手工 编写 每 一 行 
代码 是 不 现实 的 。 

好 在 我 们 有 的 选择 。 绘图 上 下 文 不 只 是 能 绘制 下 线 和 曲线 ， 它 还 文 持 各 种 方法 ,让 我 们 能 
接 绘 制 已 有 的 图 片 、 文 本 、 图 和 案 ， 甚 至 视频 帧 。 接 下 来 的 几 节 就 介绍 如 何 使 用 这 些 方 法 ， 从 而 在 
画布 中 生成 更 丰 训 的 内 容 。 


7.1.1 绘制 图 像 


大 家 都 见 过 使 用 卫星 图 请 构 建 的 网 页 地 图 吧 ， 其 中 的 地 图 切片 都 是 下 载 后 又 拼合 到 一 起 的 。 
这 个 典型 的 例子 说 明 ， 我 们 可 以 利用 已 有 图 片 ， 将 它们 组 织 成 最 终 作 品 。 
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绘图 上 下 文 提 供 了 drawImage() 方 法 ， 用 于 在 画布 上 绘制 图 片 。 使 用 这 个 方法 很 简单 ， 调 用 
它 的 时 候 传 入 相应 的 图 片 对 象 及 起 点 坐标 即 可 : 

context.drawImage(img, 10, 10); 

虽然 ,在 调用 drawImage() 之 前 ， 需 要 准备 好 图 片 对 象 。HTMLS 为 此 提供 了 三 个 方案 。 首 先 ， 
可 以 使 用 createImageData() 方 法 一 个 像 系 一 个 像素 地 创建 图 像 。 这 种 方法 很 及 烦 ， 也 没有 效率 
(但 7.5.3 市 仍然 会 介绍 像 系 级 操作 )。 

其 次 ， 是 使 用 网 页 中 已 有 的 <img> 元 素 。 比 如 ， 假 设 网 页 中 存在 如 下 标记 : 


«img id-"arrow left" src-"arrow left.png"» 
那么 ， 使 用 以 下 代码 就 可 以 把 该 图 片 复 制 到 画布 上 : 


var img = document.getElementById("arrow left"); 
context.drawImage(img, 10, 10); 


第 三 种 方案 是 在 代码 中 创建 一 个 图 片 对 象 , 然后 把 一 个 外 部 图 片 加 载 进 来 。 但 这 个 方案 有 一 
个 缺点 ， 即 必须 先 等 等 图片 加 载 完 毕 ， 然 后 才能 把 图 片 对 象 传递 给 drawImage() 方 法 使 用 。 为 此 ， 
需要 每 待 图 片 对 象 的 onLoad 事 件 发 生 ， 人 然后 再 人 处理 图 片 。 

为 了 理解 这 个 过 程 ， 最 好 看 一 个 例子 。 假 设 我 们 有 一 张 名 为 maze.png 的 图 片 ， 你 想 把 它 显 示 
在 画布 上 。 理 论 上 讲 ， 应 该 通过 如 下 几 步 实现 : 

// 创 建 图 片 对 象 


var img = new Image(); 











// 加 载 图 片 文件 
img.src = maze.png ; 


// 绘 制图 片 。 (可 能 会 因为 图 片 尚 未 加 载 完 而 导致 失败 ) 





context.drawImage(img, 0, 0); 


我 的 图 片 变 形 了 
在 绘制 图 片 时 ， 如 果 你 发 现 原来 的 图 片 不 知 为 什么 被 拉 长 了 、 压 遍 了 ， 总 之 变 形 了 ， 那 幕 
后 黑手 很 可 能 是 样式 表 规 则 。 
为 画布 指定 宽度 和 高 度 的 最 佳 方案 , 就 是 在 HTML 标 记 中 使 用 width 和 height 属 性 。 可 能 有 
人 完 得 像 下 面 这 样 使 用 标记 更 简洁 : 
«canvas»«/canvas» 
因为 可 以 通过 样式 表 规 则 来 控制 画布 的 大 小 ， 比 如 : 
canvas { 
height: 300px; 
width: 500px; 
但 这 个 方案 行 不 通 ! 问题 在 于 ，CSS 的 width 和 height 属 性 与 画布 的 width 和 height 属 性 并 
不 是 一 回 事 儿 。 假如 你 真 的 这 么 做 了 ， 那 画布 会 取得 其 默认 尺寸 (300 像 素 x150 像 素 )。 然后， 
CSS 的 width 和 height 属 性 又 会 把 画布 拉 伸 或 压缩 到 它 设置 的 大 小 ,与 此 同时 , 通 布 中 的 内 容 也 


7.1 高 级 Canvas 绘 图 | 169 


会 随 之 变形 。 结 果 ， 在 通过 画布 显示 图 片 时 ， 图 片 也 会 被 压 遍 ， 这 显示 会 降低 图 片 的 吸引 力 。 
为 避免 这 个 问题 , 请 一 定 要 在 HTML 标 记 中 为 画布 指定 宽度 和 高 度 。 如 果 你 想 在 菜 个 条 件 
下 改变 画布 的 大 小 ， 可 以 使 用 JavaScript 代 码 来 修改 ccanvas> 元 素 的 宽 和 高 。 








以 上 代码 的 问题 是 设置 图 片 对 象 的 src 属 性 后 只 是 开始 加 载 外 部 图 片 ， 但 代码 没有 答 到 加 载 
完成 就 立即 执行 绘图 操作 。 对 此 ， 正 确 的 方式 是 像 下 面 这 样 : 
// 创 建 图 片 对 象 


var img = new Image(); 

// 添 加 on1load 事 件 处 理 程序 

// 告 诉 浏览 器 在 图 片 加 载 完 成 后 该 做 什么 

img.onload = function() { 
context.drawImage(img, 0, 0); 


n 
// 加 载 图 片 文件 
img.src = maze.png 





乍 一 看 ， 这 有 点 违反 下 和 澳 。 因 为 代码 的 顺序 与 执行 顺序 并 不 一 致 。 对 这 个 例子 而 言 ， 
context.drawImage() 实 际 上 会 后 执行 ， 也 就 是 会 在 设置 img.src 属 性 的 代码 执行 后 才 执行 。 

有 了 图 片 ， 就 可 以 实现 很 多 新 奇 的 功能 。 比 如 ， 可 以 用 它们 来 装饰 自己 的 线条 图 作品 ， 可 以 
直接 绘制 图 片 而 节省 手工 绘制 时 间 。 如 采 是 在 游戏 里 , 可 以 使 用 图 片 来 表示 物体 和 人 物 ， 把 它们 
分 别 摆 放 在 画布 的 不 同位 置 上 。 而 在 画图 程序 里 使 用 图 片 代 特 线段 ， 就 可 以 画 出 “纹理 化 ”的 线 
条 来 。 本 章 会 介绍 一 些 使 用 图 片 绘图 的 实用 技术 。 


7.1.2 裁剪、 切 割 和 伸缩 图 片 


可 以 给 drawImage() 函 数 传递 一 些 可 选 的 参数 ， 从 而 影响 在 画布 上 绘制 图 片 的 方式 。 首 先 ， 
如 采 想 改变 图 乒 的 大 小 ， 可 以 添加 宽度 和 高 度 ， 例 如 : 

context.drawImage(img, 10, 10, 30, 30); 

这 就 相当 于 为 图 片 准 备 了 一 个 30 x 30 的 方 框 , 其 左上 和 角 在 画布 上 的 坐标 为 (10,10)。 假设 图 片 
实际 上 是 60 像 素 x 60 像 系 , WAT E ERRES ER Fr B v ERES RERBA RAE, 最 终 在 画布 上 
呈现 的 大 小 只 有 原来 的 1/4。 

如 果 想 裁剪 掉 一 部 分 图 片 ， 可 以 再 为 drawImage() 困 数 传人 4 个 参数 ， 这 个 4 个 参数 从 图 片 对 
象 参数 后 面 开始 。 之 所 以 传人 4 个 参数 , 正 是 为 了 定义 从 原始 图 片 的 什么 位 置 ， 裁剪 多 大 的 图 卢 ， 
每 个 参数 的 含义 如 下 所 示 : 


context.drawImage(img, source x, source y, 
source width, source height, x, y, width, height); 


Tp 44-2805 EANA PHE, ERER HR B E Fr ve mp E BUDZBONUN TN. 
比如 有 一 张 200 像 系 x 200 z& BER Hr , 但 我 们 只 想 在 画布 上 绘制 它 的 上 半 部 分 。 为 此 ,就 要 
创建 一 个 200 像 素 x 100 像 素 的 矩形 框 ， 从 原始 图 片 的 (0,0) 位 置 开 始 裁剪 ， 得 到 图 斤 的 上 半 部 分 。 
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然后 ， 把 裁剪 后 的 结果 绘制 到 画布 上 ， 起 点 为 (75,25)。 用 代码 表示 就 是 : 
context.drawImage(img, 0, O, 200, 100, 75, 25, 200, 100); 


图 7-1 演 示 了 这 个 例子 的 结 朱 。 


图 7-1: 左 : 原始 图 


"IL 


5 24] [ A &)| CroppedPicturehtml O - > X| ii p 203 He 4: 把 裁剪 结 


[e nope Picture X | | mi ig || [E] 布 上 





如 条 你 想 要 实现 的 效 宁 更 多 ， 比 如 先 扭 由 和 旋转 图 片 ， 然 后 再 绘制 ， 那 drawImage() 方 法 就 





不 够 用 了 。 不 过 ， 可 以 使 用 6.1.4 节 学 习 的 变换 来 修改 绘制 所 有 内 容 的 方式 。 am 
7 
绘制 视频 帧 


我 们 知道 ，drawImage() 方 法 的 第 一 个 参数 是 要 绘制 的 图 片 。 如 前 所 述 ， 这 个 图 片 可 以 是 
临时 创建 的 图 片 对 象 ， 也 可 以 是 页 面 菜 个 地 方 已 经 存在 的 <img> 元 素 。 

但 这 些 并 非 HTML5 为 EO E 能 。 实 际 上 ， 除 了 绘制 图 片 ， 还 可 以 绘制 
整个 <canvas> 元 素 (不 是 当前 的 这 个 )。 另 外 ， 还 可 以 绘制 目前 正在 播放 的 video> 元 素 ， 且 无 
需 额 外 的 工作 : 


var video = 
document .getElementById("videoPlayer"); 


context.drawImage(video, 0, 0， 
video.clientWidth, video.clientWidth); 


以 上 代码 运行 后 , 会 捕获 代码 运行 瞬间 正在 播放 的 视频 中 的 一 帧 和 画面, 然后 把 该 画面 绘制 
到 画布 上 。 

这 就 为 实现 其 他 很 多 有 趣 的 效果 提供 了 可 能 , 例如 ,可 以 利用 一 个 计时 器 来 不 断 捕获 播放 
中 的 视频 ， 然 后 不 断 将 新 画面 绘制 到 画布 上 。 假 如 整个 过 程 足 够 快 ， 则 复制 的 画面 在 画布 上 连 
续 播 放 ， 就 会 成 为 另 一 个 视频 播放 器 。 

发 挥 一 点 想象 ， 比如 可 以 在 绘制 和 画面 之 前 ,对 其 进行 一 些 修改 。 比 如 ,可 以 放大 或 缩小 画 
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面 ， 或 者 取得 其 中 的 像素 数据 ， 然 后 应 用 Photoshop 滤 镜 般 的 效果 。 要 了 解 这 方面 的 实际 示例 ， 
可 以 参考 这 篇 文章 : http://html5doctor.com/video-canvas-magic。 这 篇 文章 里 介绍 了 在 画布 中 播 
放 黑 白 通 面 的 实现 过 程 , 方法 就 是 从 现 有 视频 中 实时 取得 画面 截图 ,然后 把 每 个 彩色 像素 转换 
成 黑白 像素 ， 最 后 再 绘制 到 画布 上 。 


7.1.3 绘制 文本 


除了 直线 和 曲线 ， 你 一 定 还 想 在 画布 上 绘制 文本 ,但 你 肯定 不 愿意 自己 通过 绘制 线条 来 形 
成 文本 。HTML5 规 范 也 没有 认为 你 愿意 。 为 此 ,我 们 就 有 了 为 外 两 个 绘图 上 下 文 方法 文 持 绘 制 
文本 。 

首先 ， 在 绘制 文本 之 前 要 设置 绘图 上 下 文 的 font 属 性 。 这 个 属性 的 值 是 一 个 字符 串 ， 与 设置 
CSS 的 font 属 性 时 使 用 的 “多 合 一 ”的 值 相同 。 最 简单 的 情况 ， 也 要 设置 字体 大 小 〈 像 系 MF 
体 名 称 ， 比 如 : 

context.font = "20px Arial"; 

AR ABER EH BUD AA E, nIEAZEPIIBULRIGK : 

context.font = "20px Verdana,sans-serif"; 

此 外 ， 还 可 以 为 字体 应 用 加 粗 效 果 ， 不 过 要 把 它 放 在 字符 串 的 开头 : 

context.font = "bold 20px Arial"; 

而 在 CSS3 的 支持 下 ， 其 至 还 可 以 使 用 上 自己 般 入 的 新 宁 字 体 。 这 要 涉及 使 用 样式 表 来 注册 字 
体 ， 相 关内 容 将 在 8.2 节 介绍 。 

设置 好 字体 后 ， 就 可 以 调用 fillText() 方 法 绘制 文本 内 容 了 。 以 下 示例 代码 将 把 文本 内 容 的 
左上 和 角 放 在 画布 的 (10,10) 坐 标点 处 : 


context.textBaseline = "top"; 
context.fillStyle = "black"; 
context.fillText("I'm stuck in a canvas. Someone let me out!", 10, 10); 


可 以 把 文本 内 容 绘制 到 任何 地 方 , 但 每 次 却 只 能 绘制 一 行 。 如 果 要 绘制 多 行文 本 , 那 只 能 多 
次 调用 fillText() 方 法 。 





























法 。 基本 的 思路 就 
行 可 以 放下 多 少 个 
能 从 中 得 到 一 些 启 


提示 “如 果 要 把 一 个 完整 的 段落 拆 成 多 行文 本 ， 可 以 设计 自己 的 单词 折 行 算 
是 把 句子 拆 成 单词 ， 然 后 通过 绘图 上 下 文 的 measureText() 方 法 获悉 每 
单词 。 这 个 工作 确实 很 烦琐 ， 不 过 可 以 参考 这 里 的 示例 代码 ， 也 许 你 
发 http;//tinyurl.com/6ec7hld. 





除了 位 llText() 方 法 ， 还 有 男 一 个 绘制 文本 的 方法 ， 即 strokeText()。 这 个 方法 用 于 绘制 
文本 的 轮 廊 ， 轮 廓 的 颜色 取 自 strokeStyle 属 性 ， 而 轮廓 的 完 度 取 目 lineWidth 属 性 。 下 面 是 一 
个 例子 : 
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context.font = "bold 40px Verdana,sans-serif'; 
context.lineWidth = "1"; 

context.strokeStyle = "red"; 
context.strokeText("I'm an OUTLINE", 20, 50); 


使 用 strokeText() 时 ， 文 本 的 中 部 是 空白 的 。 当 然 ， 如 果 你 想得到 加 了 彩色 描 边 的 文本 ， 可 
以 先 调用 fill1Text() 绘 制 实心 文本 ， 然 后 调用 strokeText() 绘 制 文本 的 轮 廊 。 网 7-2 展 示 了 这 两 个 
方法 绘制 的 文本 。 














图 7-2: 在 画布 上 绘制 实心 文本 和 空心 文本 都 
很 简单 














提示 “与 绘制 线条 和 图 片 相 比 , 绘制 文本 的 速度 稍 慢 一 些 。 如 果 你 想 创 建 静 态 、 不 变 的 图 像 ( 如 
数据 图 表 )， 这 个 速度 不 是 问题 。 但 是 ， 如 果 你 想 创建 交互 、 动 态 的 应 用 ， 那 么 绘制 文本 
的 速度 可 能 就 会 影响 性 能 。 至 于 优化 速度 的 手段 ， 可 能 就 是 事先 把 文本 保存 为 图 片 ， 然 
后 再 使 用 drawImage() 把 图 片 绘制 到 画布 上 。 


7.2 [BE SIR 


ME, 我们 在 画布 上 绘制 线条 和 填充 图 形 时 , 使 用 的 都 是 实 色 。 这 当然 没有 问题 ,不 过 要 是 
告诉 大 家 Canvas 还 有 一 些 新 奇 的 绘图 功能 ， 有 创意 的 设计 师 一 定 会 兴高采烈 。 比 如 ， 可 以 在 画 
布 上 为 图 形 绘 制 模糊 的 阴影 , 可 以 用 小 图 案 来 填充 图 形 。 当然, 最 令 人 拍手 叫绝 的 还 是 渐变 功能 ， 
把 多 种 颜色 组 合 起 来 ， 能 够 形成 千变万化 的 模式 。 
接 下 来 的 几 市 我 们 就 来 介绍 这 些 新 功能 , 实际 上 只 要 简单 地 设置 绘图 上 下 文 的 另外 一 些 属 性 
NUR T o 














7.2.1 添加 阴影 
为 绘制 的 任何 内 容 添 加 阴影 是 Canvas 最 便利 的 功能 。 图 7-3 展 示 了 几 种 阴影 的 示例 。 
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| 图 7-3: 阴影 与 形状 、 图 片 和 文本 一 样 。 特 别 
AM | — X - | AE SR TP E HE RR RS SP Jn 阴 影 时 ， 阴 影 的 形 
— i ou d] 状 会 随 不 透明 部 分 的 形状 变化 ， 比 如 图 中 右 
上 角 的 五 角 星 ， 其 阴影 的 形状 也 是 相同 的 五 
角形 ， 而 不 是 方形 。 ( 在 编号 本 书 时 ， 还 只 
有 IE 和 Firefox 支 持 这 个 功能 。) 阴影 与 文本 也 
是 相辅相成 ， 而 且 设 置 不 同 ， 阴 影 的 效果 也 
不 一 人 性 











| This is a subtle, slighly old-fashioned shadow. 





: This is a distant shadow... 














本 质 上 ,可 以 把 阴影 看 成 原来 绘制 内 容 〈 直线 、 形 状 、 图 片 或 文本 ) 的 模糊 版 。 控 制 阴影 的 
外 观 ， 需 要 使 用 绘图 上 下 文 的 几 个 属性 ， 如 表 7-1 所 示 。 


表 7-1 阴影 相关 的 属性 








属 性 说 明 
shadowColor 设置 阴影 颜色 。 可 以 把 阴影 设置 为 黑色 或 彩色 , 但 中 性 灰 还 是 最 佳 选择 。 另 外 一 种 技术 是 使 用 


半 透 明 的 颜色 (参见 6.1.5 节 ) ， 以 便 下 方 内 容 可 以 若隐若现 。 在 不 需要 阴影 的 时 候 ， 可 以 把 
shadowColor 设 置 为 完全 透明 

shadowBlur 设置 阴影 的 模糊 程度 。 值 为 0 表示 锐利 的 阴影 ， 结 果 会 生成 原始 形状 的 一 个 轮廓 鲜明 的 副本 。 
相对 来 说 ， 值 为 20 的 时 候 已 经 比较 模糊 了 ,不 过 当然 还 可 设置 更 大 的 值 。 一 般 来 说 ， 这 个 值 不 
小 于 3 才 会 达到 最 佳 效 果 





shadowOffsetX 设置 阴影 相对 于 内 容 的 位 置 。 例 如 ， 把 这 两 个 属性 都 设置 为 5， 会 导致 阴影 被 绘制 到 原 图 形 同 
shadowOffsetY 右 和 右 下 各 5 像素 的 位 置 。 使 用 负 值 可 以 把 阴影 移动 到 其 他 位 置 ( 左 或 上 方 ) 





以 下 是 创建 图 7-3 中 所 示 各 种 阴影 的 代码 : 


// 绘 制 矩 形 阴 影 

context.rect(20, 20, 200, 100); 
context.fillStyle = "s88bD6FF"; 
context.shadowColor = "Hbbbbbb"; 
context.shadowBlur - 20; 


context.shadowOffsetX = 15; 
context.shadowOffsetY = 15; 
context.fill(); 

// 绘 制 星 形 阴 影 
context.shadowOffsetX = 10; 
context.shadowOffsetY = 10; 


context.shadowBlur - 4; 
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img = document.getElementById(" star"); 
context.drawImage(img, 250, 30); 


context.textBaseline = "top"; 
context.font = "bold 20px Arial"; 


// 绘制 三 行文 本 的 阴影 

context.shadowBlur = 3; 

context.shadowOffsetX = 2; 

context.shadowOffsetY = 2; 

context.fillStyle = "steelblue"; 

context.fillText("This is a subtle, slightly old-fashioned shadow.", 10, 175); 


context.shadowBlur = 5; 

context.shadowOffsetX = 20; 

context.shadowOffsetY = 20; 

context.fillStyle - "green"; 

context.fillText("This is a distant shadow...", 10, 225); 


context.shadowBlur = 15; 

context.shadowOffsetX = 0; 

context.shadowOffsetY = 0; 

context.shadowColor = "black"; 

context.fillStyle = "white"; 

context.fillText("This shadow isn't offset. It creates a halo effect.", 10, 
300); 


7.22 填充 图 案 am 
7 
立 /AN zh 


说 到 填充 ,我 们 到 目前 为 止 用 到 的 都 是 实 色 或 部 分 透明 的 颜色 。 除 此 之 外 , 还 可 以 使 用 图 案 
和 渐变 。 图 宁 和 潮 变 可 以 让 平淡 无 奇 的 图 形 一 下 子 变 得 活泼 起 来 。 这 两 种 填充 方式 很 简单 ， 只 要 
两 步 。 首先 , 创建 要 填充 的 内 容 。 然后 , 将 其 添加 到 fillsStyle 属 性 (有 时 候 需 要 使 用 strokeStyle 
属性 )。 

要 实现 用 图 案 填 充 , 首先 要 选择 一 张 小 图 片 , 而 且 要 能 够 前 后 左右 拼接 在 一 起 窗 盖 一 块 大 区 
域 (参见 图 7-4 )。 当 然 , 需要 利用 前 面 介 绍 的 技术 把 这 张 图 片 加 载 到 图 片 对 象 中 ， 比 如 在 页 面 中 
放 一 个 隐藏 的 <img> 元 素 (参见 7.1 市 ), 或 者 使 用 代码 创建 图 片 对 象 ， 把 外 部 图 片 加 载 进 来 , 然后 
处 理 图 片 对 象 的 onLoad 事 件 。 在 此 ， 我们 使 用 第 一 种 方法 : 

var img = document.getElementById("brickTile"); 

有 了 图 片 对 象 后 ， 就 可 以 利用 绘图 上 下 文 的 createPattern() 方 法 创建 一 个 图 案 对 象 。 此 时 ， 
可 以 选择 图 案 是 水 平 (repeat-x). ÆA (repeat-y )， 还 是 在 两 个 方 同 ( repeat ) 重复 : 


var pattern = context.createPattern(img, "repeat"); 


最 后 是 使 用 图 案 对 象 设置 fillstyle 或 strokeStyle 属 性 : 


context.fillStyle = pattern; 
context.rect(O, O, canvas.width, canvas.height); 
context. fill(); 
































72 ”阴影 与 填充 | 175 


这 样 ， 丈 创造 出 了 用 小 幅 图 片 填 充 画 布 的 效 灯 ， 如 图 7-4 所 示 。 


emassa ma 7 左 :作为 图 案 的 图 
y i T icd A uM | 


”的 整体 效果 
X WT 
^ 





7.2.3 填充 渐变 


第 二 种 填充 形式 是 渐变 , 也 台 是 混合 在 一 起 的 两 种 或 多 种 颜色 。Canvas 文 持 线性 渐变 和 放射 
性 渐变 ， 图 7-5 展 示 了 这 两 种 渐变 形式 。 





OEE 图 7-5， 线性 浙 变 ( 左上 ) 是 在 一 个 方向 上 混合 色彩 。 放 射 性 

e» c Gunn x| HAEE) 是 从 一 点 向 四 周 混合 色彩 。 这 两 种 渐变 形式 都 
支持 多 种 颜色 混合 ， 因 此 使 用 线性 渐变 可 以 创造 出 色谱 效果 
( 左下 ) ,使 用 放射 性 渐变 可 以 创造 出 同心 圆 扩散 的 效果 ( 右 
T) 





提示 。 如 果 读 者 是 在 黑白 纸 质 书 上 看 这 个 图 中 的 渐变 效果 ， 建 议 你 访问 http://www.prosetech. 
com/html5， 看 看 真实 网 页 中 丰富 的 色彩 ,估计 会 震撼 你 一 小 下 。( 网 页 中 的 绘图 代码 也 
包含 绘制 心 形 的 逻辑 ， 每 个 心 形 都 是 通过 把 4 条 贝 塞 尔 曲 线 连接 成 一 段 路 径 做 出 来 的 。) 


176 | 第 7 章 高 级 Canvas 技术 





fh bier SJ T, 使 用 渐变 填充 的 第 一 步 是 创建 渐变 对 象 。 绘 图 上 下 文 为 此 提供 了 两 个 方 
ik: createLinearGradient() 和 createRadialGradient()。 这 两 个 方法 的 用 法 大 致 相同 ， 即 它们 接 
收 一 组 坐标 ， 表 示 不 同 颜色 的 起 点 。 

理解 渐变 的 最 简单 方式 就 是 看 一 个 例子 。 以 下 代码 创建 的 是 岁 7-$ 左 上 角 心 形 的 渐变 : 

// 创 建 一 个 从 (10,0) 到 (100,0) 的 渐变 

var gradient = context.createlinearGradient(10, 0, 100, 0); 








// 添 加 两 种 颜色 
gradient.addColorStop(0, "magenta"); 
gradient.addColorStop(1, "yellow"); 
AA — S CARE A 
drawHeart(60, 50); 


// 填 充 心 形 
context.fillStyle = gradient; 
context.fill(); 
context.stroke(); 


这 里 是 创建 线性 渐变 ， 因 此 我 们 给 createLinearGradient() 传 人 两 个 坐标 点 ， 分 别 表 示 渐 变 
的 起 点 和 终点 。 起 点 和 终点 构成 了 颜色 逐渐 过 渡 的 区 间 。 

起 点 到 终点 的 渐变 线 很 重要 ， 因 为 它 决 定 了 渐变 的 最 终 效 果 (参见 图 7-6 )。 例 如 一 个 从 品 红 
过 渡 到 黄色 的 线性 渐变 ， 这 个 渐变 可 以 在 几 个 像素 的 距离 上 完成 ， 也 可 以 路 越 整个 画布 的 宽度 。 
mE, 渐变 可 以 是 从 左 到 右 ， 也 可 以 是 从 上 到 下 ,甚至 发 生 在 两 个 任意 点 之 间 (渐变 线 的 角度 可 
以 任意 变化 )。 总之， 渐变 线 决 定 了 这 一 切 。 











提示 “可 以 把 渐变 想象 成 位 于 画布 下 方 的 彩色 图 样 。 在 创建 渐变 时 ， 你 是 在 创建 这 个 彩色 但 却 
隐藏 的 图 样 。 而 在 填充 图 形 时 ， 你 会 在 和 画布 上 按照 图 形 的 形状 抠 出 一 个 洞 ， 从 而 让 下 面 
那 部 分 图 样 显示 出 来 。 实 际 的 效果 ( 在 画布 上 呈现 的 结果 )， 取 决 于 渐变 的 设置 和 形状 的 
大 小 及 位 置 。 


对 这 个 例子 而 言 ， 渐 变 线 的 起 点 和 终点 分 别 是 (10,.0) 和 (100,0)。 这 两 个 点 决定 以 下 重要 信息 。 

OQ 渐变 是 水 平 的 。 也 就 是 说 ， 渐 变 的 颜色 将 从 左 到 右 混合 。 之 所 以 知道 渐变 是 水 平 的 ， 是 
因为 这 两 个 点 的 y 轴 坐标 相等 。 如 果 你 想 创建 从 上 到 下 的 渐变 , 可 以 把 起 点 和 终点 设置 为 
(0,10) 和 (0,100)。 类 似 地 ， 对 角 线 方 回 的 渐变 ( 从 左上 到 右 下 )， 可 以 使 用 (10,10) 和 
(100,100)。 

OQ 实际 的 混合 颜色 区 宽度 为 90 个 像素 (x 坐标 从 10 到 100〉。 在 这 个 例子 中 ， 心 形 比 渐变 范 
围 稍 小 一 些 ， 因 此 可 以 在 心 形 里 看 到 大 部 分 渐变 。 

Q 超过 渐变 范围 的 颜色 会 变 成 实 色 。 因 此, 如 果 把 心 形 设置 得 更 宽 , 就 会 看 到 更 多 品 红 ( 左 ) 
和 黄色 A )。 
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渐变 线 的 起 点 (10,0) 7-6: 左 : 以 下 是 为 
渐变 线 的 终点 (100,0) 7-5 左 下 角 的 心 形 生 

成 的 渐变 。 用 这 个 渐变 

填充 心 形 后 ， 只 能 看 到 

整个 渐变 的 一 部 分 。 右 ， 

为 图 7-5 右 下 角 的 心 形 

生成 的 放射 性 渐变 ， 同 

样 也 只 是 整个 渐变 的 一 


部 分 





提示 “一般 来 说 ， 我 们 创建 的 渐变 只 要 恰好 比 要 填充 的 图 形 大 一 点 即 可 ， 正 如 这 个 例子 所 示 。 
当然 ， 也 还 有 其 他 可 能 。 比 如 ， 要 是 你 想 利 用 一 个 渐变 的 不 同 部 分 填充 几 个 图 形 ， 可 能 
就 需要 创建 一 个 画布 那么 宽 的 渐变 。 








确定 了 渐变 线 的 宽度 和 角度 之 后 , 接 下 来 就 该 实际 地 设置 构成 渐变 的 颜色 了 。 要 设置 渐变 产 
色 ， 需 要 使 用 渐变 对 象 的 addColorSstop() 方 法 。 每 次 调用 这 个 方法 ， 都 需要 提供 一 个 0 ~ 1 的 偏 移 
值 和 一 个 颜色 值 〈 颜 色 名 )。 其 中 ， 偶 移 值 决定 颜色 在 渐变 中 的 位 置 : 0 表示 位 于 渐变 的 起 点 ，1 
表示 位 置 渐 变 的 终点 。 改 变 这 两 个 值 ( 比 如， 分 别 改 为 0.2 和 0.8 )， 就 会 压缩 渐变 的 范围 ， 让 两 端 
显示 出 更 多 的 实 色 。 

在 创建 双色 渐变 时 , 最 好 将 0 和 1 分 别 作 为 两 种 颜色 的 偏 移 值 。 而 在 创建 多 种 颜色 构成 的 渐变 
ET, np LGB ESCBEA [B1 ES fs E [ELA IE 9. RE RULES DC HS Ws BE, 或 者 缩小 某 种 颜色 的 旋 围 。 图 7-5 中 
A Ff GJE ERU PIECE TJA BBU, BIERERPESEBUTO SED FE Ve : 


var gradient = context.createlinearGradient(10, 0, 100, 0); 
gradient.addColorStop("0", "magenta"); 
gradient.addColorStop(".25", "blue"); 
gradient.addColorStop(".50", "green"); 
gradient.addColorStop(".75", "yellow"); 
gradient.addColorStop("1.0", "red"); 





























drawHeart(60, 200); 
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context.fillStyle - gradient; 
context. fill(); 
context.stroke(); 


注意 ”如果 此 时 此 刻 你 感觉 天 旋 地 转 ， 别 慌 。 实 际 上 ， 你 不 用 理解 渐变 是 怎么 来 的 。 你 只 要 会 
调整 偏 移 值 就 够 了 ， 不 行 就 反复 调用 ， 直 至 得 到 满意 的 渐变 效果 为 止 。 





创建 放射 性 渐变 与 创建 线性 渐变 类 似 。 只 不 过 ， 这 次 不 是 指定 两 个 点 ， 而 是 要 指定 两 个 圆 。 
这 是 因为 放射 性 渐变 就 是 颜色 从 一 个 小 圆 过 渡 到 一 个 更 大 的 、 包 含 它 的 圆 。 要 定义 圆 ， 需 要 提供 
圆心 坐标 和 半径 。 

在 图 7-$ 右 上 角 那 个 放射 性 渐变 的 例子 中 ， 渐 变 的 起 点 是 在 心 形 内 部 ， 坐 标 为 (180,100)。 内 
部 颜色 由 一 个 半径 为 10 像 系 的 圆 表示 ， 外 部 颜色 由 一 个 半径 为 50 像 素 的 圆 表示 。 同 样 ， 在 小 圆 内 
部 或 者 大 圆 外 部 〈 即 超出 两 个 圆 范 围 之 外 的 地 方 ) 会 显示 实 色 ， 因 此 该 放 冉 性 渐变 的 中 心 是 品 红 
色 ， 而 外 围 是 实心 黄色 。 

以 下 是 创建 这 个 双色 放射 性 渐变 的 代码 : 


var gradient = context.createRadialGradient(180, 100, 10, 180, 100, 50); 
gradient.addColorStop(0, "magenta"); 
gradient.addColorStop(1, "yellow"); 


























drawHeart(180, 80); 
context.fillStyle = gradient; 
context.fill(); 
context.stroke(); 


注意 ”把 两 个 圆 设置 为 同心 圆 是 最 种 见 的 做 法 。 不 过 ,当然 可 以 给 内 圆 和 外 圆 设 置 不 同 的 圆心 ， 
而 这 样 可 以 实现 拉 伸 、 压 缩 或 其 他 颜色 变形 效果 。 


在 这 个 例子 的 基础 上 ， 我 们 可 以 创建 图 7-5 右 下 角 那 个 多 色 放 射 性 渐变 效果 。 只 要 把 两 个 圆 
的 圆心 坐标 平移 到 那个 心 形 的 内 部 ， 然 后 再 〈 使 用 渐变 对 象 的 addColorstop() 方 法 ) 加 上 不 同 的 
色 标 ( 与 创建 多 色 线 性 渐变 时 使 用 的 色 标 相同 ) 即 可 : 


var gradient = context.createRadialGradient(180, 250, 10, 180, 250, 50); 
gradient.addColorStop("0", "magenta"); 
gradient.addColorStop(".25","blue"); 
gradient.addColorStop(".50","green"); 
gradient.addColorStop(".75","yellow"); 
gradient.addColorStop("1.0","red"); 





drawHeart(180, 230); 
context.fillStyle = gradient; 
context. fill(); 
context.stroke(); 


FT, DWREUCESETERITXZN, ZAER ERS R SD. ERAS TREE T o 
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7.2.4 综合 示例 : 绘制 图 解 


既然 你 已 经 历尽 干 难 万 险 , 征服 了 Canvas 绘 图 更 具有 挑 成 性 的 功能 ,现在 该 俘 下 来 好 好 孚 受 
一 下 胜利 末 实 了 。 下 面 ， 我 们 将 介绍 一 个 示例 ,看 看 怎么 利用 Canvas 把 一 堆 毫 无 吸引 力 的 文本 和 
Tcr. WM SR HIER 

图 7-7 展 示 了 这 个 示例 的 起 点 状态 : 由 两 个 页 面 组 成 的 个 性 测试 ， 其 中 点 缀 看 一 些 图 乒 。 用 
户 在 第 一 个 页 面 回答 问题 ， 然 后 点 击 Get Score 转 到 下 一 页 。 第 二 页 根据 第 一 页 众所周知 的 “大 五 
人 格 理论 ”得 到 个 性 测试 的 得 分 《参见 后 面 的 附注 栏 )。 




















图 7-7: 点 击 回答 问题 ( 上 )， 然 后 看 看 
一 © E CAHTML5XChapter 07\PersonalityTest.html n) $$? 595 得 分 ( T )。 然而 这 个 测试 没有 可 视 


€ Personality 化 的 刻度 ， 一 般 人 很 难 理解 结果 分 数 
Five Factor Personality Test | 的 具体 含义 


Ø Ø Ə Q B) don't mind being the center of attention. 
E 9g g 日 feel little concern for others. 

o 9g g o 'm always prepared. 

9889 9 st stressed out easily. 

9888 9 Jg : ve à rich vocabulary. 

9888989 don't taka tot. 

& 8 9 B) 1 make people feel at ease. 

3 a 9g [4 9 leave my belongings lying around. 
9088 9 B inrelaxed most of the tine. 


i Fa Fu Fb IU "Ug c—— vcl ON PEN: nun yer Dee 














A Æ PersonalityTest Scorehtm| O~ >X| (3 v: i9 


e Personality Test 


Five Factor 
Personality Test 


The Results 
Extraversion: O 
Accommodation: -12 
Conscientiousness: 5 
Neuroticism: 19 


Openness: -11 
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怎样 把 人 格 转换 成 5 个 数字 

大 五 人 格 测试 根据 每 个 人 的 五 方面 人 格 “ 因 素 ” 来 确定 性 格 。 这 五 方面 因素 是 : 开放 性 、 
责任 心 、 外 倾 性 、 亲 和 力 和 情绪 稳定 性 。 这 些 因 素 是 研究 人 员 在 分 析 了 人 们 用 成 千 上 万 个 英语 
形容 词 描述 的 性 格 特征 之 后 提炼 出 来 的 。 

为 了 得 到 五 方面 信息 ,心理 学 家 综合 运用 了 基准 统计 信息 、 个 性 调查 和 计算 机 。 他 们 布 户 
知道 人 们 会 选择 哪些 形容 词 ,然后 据 以 提炼 出 最 小 的 性 格 特征 ,比如 ,认为 自己 乐于 助人 的 人 ,， 
一 般 会 把 自己 描述 为 喜欢 社交 和 过 集体 生活 ， 因 此 就 可 以 把 这 些 特征 归纳 为 一 个 人 格 因素 〈 心 
理学 家 称 其 为 外 倾 性 )。 经 过 对 近 两 万 个 形容 词 的 研究 ， 他 们 最 终归 纳 出 五 个 最 相关 的 因素 。 

要 了 解 “ 大 五 性 格 模 型 ”的 更 多 信息 ， 读 者 可 以 参考 http://en.wikipedia.org/wiki/Big Five 
personality traits, 或 Your Brain: The Missing Manual ( O'Reilly). 








这 个 示例 的 JavaScript 代 码 非 党 容易 理解 。 在 用 户 单 击 一 个 数字 按钮 时 , 按钮 背景 会 改变 ， 以 
反映 用 户 的 选择 。 而 用 户 回 答 完 所 有 问题 后 ,会 有 一 个 人 简单 的 算法 ， 把 答案 传 给 一 组 计 分 公式 ， 
从 而 计算 出 5 个 人 格 因 素 。 如 果 你 想 看 一 下 完整 的 代码 ， 或 者 想 动 手 试 一 试 ， 可 以 访问 
www.prosetech.com/html5 。 

到 目前 为 止 ， 还 没有 使 用 HTML5。 不 过 , 请 大 家 考虑 一 下 怎么 改进 这 个 两 页 的 人 格 测试 示 
例 ， 比 如 通过 图 解 形式 显示 5 个 人 格 因 系 的 得 分 情况 。 图 7-8 展 示 了 对 这 个 人 格 测 试 的 结 末 页 面 进 
行 改进 之 后 的 结果 ， 即 以 图 解 形 式 显 示 了 得 分 。 














图 7-8: 这 个 页 面 使 用 了 几 种 不 同 的 绘图 方式 ， 绘 制 了 
— 2 直线 、 图 像 和 文本 。 但 最 关键 的 地 方 还 是 根据 测试 答 


Five Factor Personality Test 案 动 态 绘制 的 图 示 
The Results 








Extraversion: O 


4 会 


Accommodation: -12 


«— —* 


Conscientiousness: 5 


<4 fr 


Neuroticism: 19 


4 


Openness: -11 


4«— —* 
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为 了 显示 图 解 ， 结 果 页 面 中 使 用 了 5 个 Canvas， 每 个 对 应 一 个 人 格 因 素 。 以 下 是 相应 的 
标记 : 


<hgroup> 
«hi»Five Factor Personality Test«/h1» 
«h2»The Results«/h2» 

«/hgroup» 


«div class-"score"» 

«h2 id-"headingE"»Extraversion: «/h2» 

«canvas id-"canvasE" height-"75" width-"550"»«/canvas» 
</div> 


<div class="score"> 

<h2 id="headingA">Accommodation: </h2> 

<canvas id="canvasA" height="75" width="550"></canvas> 
</div> 


<div class="score"> 

<h2 id="headingC">Conscientiousness: </h2> 

«canvas id-"canvasC" height-"75" width="550"></canvas> 
«/div» 
«div class-"score"» 

«h2 id-"headingN"»Neuroticism: «/h2» 

«canvas id-"canvasN" height-"75" width-'"550"»«/canvas» 
«/div» 


«div class-"score"» 

«h2 id-"headingO"»Openness: «/h2» 

«canvas id-"canvasO" height-"75" width-'"550"»«/canvas» 
«/div» 


fi^ Fon S HJ T fR]—4- HAE X.JavaScriptPRZX, plotScore(). iX n MJH f plotScore() 
函数 $ 次 ， 每 次 都 传人 不 同 的 参数 。 例 如 ， 在 页 面 顶 部 绘制 “外 倾 性 ”的 图 示 时 ， 传 递 的 参数 是 
最 顶部 的 Canvas 元 素 、 分 数 (从 -20~20 的 值 )， 以 及 文本 标题 (“Extraversion”) : 


window.onload = function() { 





// 取 得 显示 外 倾 性 图 示 的 画布 

var canvasE = document.getElementById("canvasE"); 

// 将 分 数 添 加 到 对 应 的 标题 后 面 

// (分 数 保 存在 变量 extraversion 里 ) 
document.getElementById("headingE").innerHTML += extraversion; 


// 在 对 应 的 画布 中 标 绘 分 数 
plotScore(canvasE, extraversion, "Extraversion"); 
- 
Fifi BE plotScroe() PR, ARAA T— RI ARRE, HR EBUIEIAFZHHUAMYA,. BE 
应 该 不 难 理解 这 些 人 代码。 总之， 代码 中 使 用 了 各 种 绘图 上 下 文 的 方法 ， 绘 制 了 分 数 图 示 的 不 


同 部 分 : 
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function plotScore(canvas, score, title) { 
var context = canvas.getContext("2d"); 


/ [| EAT 83 98 36 22 A 

var img = document.getElementById("arrow left"); 
context.drawImage(img, 12, 10); 

img = document.gettElementById("arrow right"); 
context.drawImage(img, 498, 10); 


// 绘 制 和 前 头 之 间 的 刻度 线 

context.moveTo(39, 25); 
context.lineTo(503, 25); 
context.lineWidth = 10; 
context.strokeStyle = "rgb(174,215,244)"; 
context.stroke(); 


// 把 数值 写 在 刻度 位 置 上 

context.fillStyle = context.strokeStyle; 
context.font = "italic bold 18px Arial'; 
context.textBaseline = 'top'; 


context.fillText("-20", 35, 50); 
context.fillText("0", 255, 50); 
context.fillText("20", 475, 50); 


// 绘 制 星星 ， 显 示 分 数 在 图 示 上 的 位 置 
img = document.getFElementById("star"); 
context.drawImage(img, (score*20)/40*440435-17, 0); 


j 

最 重要 的 是 最 后 一 行 代码 , 这 行 代 码 通过 有 点 不 好 理解 的 公式 , 把 星星 绘制 在 正确 的 位 置 上 : 
context.drawImage(img, (score420)/40*440*35-17, 0); 
这 里 稍微 解释 一 下 。 首 先是 把 分 数 转换 为 0 100 的 百分比 值 。 因 为 分 数 一 般 会 落 在 -20 一 20 

这 个 区 间 内 ， 所 以 代码 第 一 步 要 把 这 个 分 数 转换 成 0 一 40 的 什 : 





SCOTe+20 
而 用 这 个 值 除 以 40 就 可 以 得 到 百分比 值 : 
(score+20)/40 





得 到 百分比 值 后 ， 接 下 来 需要 用 它 习 以 刻度 线 的 长 度 。0% 表 示 在 最 左 瑞 ，100% 表 示 在 为 外 
一 端 ， 而 其 他 百分比 值 的 结果 就 是 位 于 两 端 之 间 : 

(score+20)/40*440 

如 有 末 刻 度 线 的 x 坐 标 是 从 0 到 400， 这 个 公式 就 已 经 够 用 了 。 但 实际 上 ， 这 条 线 是 从 画布 左边 
偶 右 一 点 绘制 的 ， 目 的 是 为 了 留 下 一 些 空间 。 因 此 ， 需 要 在 绘制 星星 时 也 侦 移 相应 的 像素 数 : 

(score*20)/40*440*35 

可 是 , 这 样 只 把 星星 的 左边 放 到 正确 的 位 置 上 。 而 我 们 实际 上 是 想 把 星星 的 中 心 点 放 在 该 位 
置 。 为 了 补偿 这 个 距离 ， 需 要 再 减 去 星星 宽度 的 一 半 : 
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(score420) /40*440*35-17 


这 就 是 根据 分 数 计算 得 到 的 星星 的 x 坐标 了 。 





注意 ”从 静态 绘图 到 这 个 例子 中 所 展示 的 根据 数据 来 动态 绘图 , 应 该 说 只 是 向 前 跨越 了 一 小 步 。 
而 哪怕 是 跨越 了 这 一 小 步 之 后 ， 你 就 具备 了 创建 各 种 数据 驱动 图 表 的 经 验 ， 无 论 是 传统 
的 饼 图 ， 还 是 使 用 刻度 盘 和 计量 仪 的 信息 图 。 什 么 ， 有 没有 简化 工作 的 工具 ? 有 啊 ， 推 
荐 大 家 使 用 Canvas 图 形 库 ， 这 些 库 包含 写 好 的 JavaScript 骂 数 ， 可 以 根据 你 的 数据 绘制 常 
见 的 图 表 。 比 如 ，RGraph ( http//www.rgraph.net/ ) feZingChart ( http://www.zingchart.com/ ) 
都 是 不 错 的 选择 。 


7.3 ”赋予 图 形 交 互 能 


Canvas 是 一 种 非 保留 性 的 绘图 界面 。 换 名 话说 ， 它 不 会 记录 过 去 执行 的 绘图 操作 ， 而 只 是 保 
持 最 终结 果 一 一 构成 图 像 的 彩色 像 系 。 

比如 ， 你 要 在 画布 中 央 绘 制 一 个 红色 的 正方 形 ， 调 用 stroke() 或 fil1() 之 后 ， 那 个 正方 形 仅 
仅 就 是 包含 红色 像素 的 正方 形 区 域 。Canvas 不 会 保存 这 个 正方 形 区 域 。 

这 个 模型 能 保证 绘图 速度 ,但 同时 也 导致 不 便 为 绘制 的 图 形 次 加 交互 性 。 假 设 你 想 为 图 6-11 
所 示 的 画图 程序 创建 一 个 更 智能 的 版 本 , 比如 不 仅 支 持 男 线 , 还 文 持 男 和 矩形 。( 文 持 男 和 矩形 不 难 。) 
而 且 , MALME, 还 要 文 持 让 用 户 选 择 、 拖 动 和 矩形， 以 及 调整 矩形 大 小 、 改 变 颜 色 ,， 等 等 。 
在 实现 这 些 功能 之 前 ， 必 须 理 清 几 方面 思路 。 首 先 ， 怎 么 知道 用 户 选 择 了 算 形 ? 其 次 ， 怎 么 知道 
矩形 的 相关 信息 ， 比 如 坐标 、 大 小 、 摘 边 颜 色 、 填 充 颜 色 ? 最 后 ,怎么 知道 画布 上 其 他 形状 的 信 
县 一 一 这 些 信息 在 需要 改变 矩形 和 重 绘画 布 时 有 用 ? 

要 解决 这 些 问 题 ， 把 Canvas 变 得 具有 交互 性 ， 必 须 记 录 绘 制 的 每 一 个 对 象 。 此 外 ,在 有 人 单 
击 Canvas 中 的 某 个 地 方 时 ， 还 要 检测 被 单 击 的 是 不 是 其 中 一 个 图 形 ( 这 个 过 程 叫 碰撞 检测 )。 如 
末 能 实现 这 两 个 任务 ， 剩 下 的 〈 修 改革 个 图 形 或 重 绘画 布 ) 就 简单 了 。 


7.8.4 记录 绘制 的 内 容 


为 了 修改 和 重 绘画 面 ， 必 须 移 知道 要 修改 和 重 绘 什么 内 容 。 就 以 图 7-9 所 示 的 绘制 圆圈 的 程 
序 为 例 ， 但 为 了 催 单 起 见 ， 其 中 包含 的 圆 图 的 大 小 、 颜 色 各 不 相同 。 

为 了 记录 每 一 个 圆 峰 , 知 要 知道 它们 的 位 置 、 半 答 以 及 填充 色 。 与 其 声明 一 大 堆 变 量 来 保存 
这 些 信息 ， 不 如 把 上 述 4 个 值 都 放 在 同一 个 小 数据 结构 中 。 这 个 数据 结构 就 是 自 定义 对 象 。 

什么 ,不 知道 怎么 创建 和 目 定 义 对 象 ? 下 面 就 是 一 种 标准 的 做 法 。 Bo. 创建 一 个 函数 ， 子 数 
名 就 是 用 于 创建 这 种 对 象 的 类 型 名 。 比 如 ， 要 创建 一 种 圆圈 类 型 ， 可 以 把 函数 命名 为 Circle(): 


function Circle() ( 
} 
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然后 ， 需 要 让 这 个 对 象 能 保存 数据 。 为 此 ， 要 使 用 关键 字 this 来 创建 属性 。 比 如 ， 要 为 将 来 
的 对 象 创 建 一 个 radius 属 性 ， 应 该 把 值 赋 给 this.radius。 


图 7-9: 这 个 绘制 圆圈 的 程序 是 交互 

| 性 的 。 单 击 可 以 选择 一 个 圆 ( 边框 会 

[E interactive Circes > [u 变 成 另 一 种 颜色 ) ， 而 且 能 把 它 拖 动 
到 新 位 轩 


Add Circe 





如 果 创 建 圆 圈 的 函数 中 要 保存 3 方面 信息 : 圆 的 zx 坐标 、) 坐 标 和 半径 ， 可 以 这 样 写 : 


function Circle() ( 





this.x = 0; 
thix.y = 0; 
this.radius = 15; 


} 

好 了 ， 现 在 可 以 使 用 这 个 Circle() 函 数 来 创建 新 的 圆圈 对 象 了 。 这 里 的 关键 是 并 非 要 调用 该 
困 数 ， 而 是 要 使 用 new 天 键 字 来 创建 它 的 一 个 副本 ， 比 如 : 

// 创 建 一 个 新 的 Cirfcle 对 象 ， 并 将 其 保存 在 变量 myCircle 中 

var myCircle = new Circle(); 

之 后 ， 就 可 以 像 下 面 这 样 来 访问 这 个 圆圈 对 象 的 属性 : 


// 修 改 半径 
myCircle.radius = 20; 


不 仅 如 此 , 要 是 你 想 让 定义 新 圆圈 对 象 的 过 程 更 灵活 一 些 , v n] ELcircle() PRIUS AX S 
这 样 就 可 以 在 创建 新 圆圈 对 象 的 时 候 ， 一 次 性 设置 圆圈 的 所 有 属性 。 下 面 就 是 用 于 创建 图 7-9 中 
圆圈 对 象 的 另 一 个 Circle() 上 男 数 : 
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function Circle(x, y, radius, color) ( 
this.x = xj 
this.y = y; 
this.radius = radius; 
this.color = color; 
this.isSelected = false; 


} 
这 里 的 isSelected 属 性 值 不 是 true 就 是 false。 在 用 户 单 击 这 个 圆圈 时 ，isselected 的 值 就 会 
变 成 true， 而 此 时 绘图 代码 就 知道 应 该 为 它 绘制 一 个 不 同 的 边框 了 。 
使 用 这 个 Circle() 函 数 ， 可 以 利用 如 下 代码 来 创建 一 个 圆圈 对 象 : 
var myCircle = new Circle(0, 0, 20, "red"); 
当然 ,圆圈 绘图 程序 最 终 是 要 文 持 用 户 画 任意 圆圈 的 。 所 以 不 可 能 只 创建 一 个 圆圈 对 象 。 为 
此 , 需要 创建 一 个 数组 , 用 于 保存 所 有 圆圈 。 下面 就 是 我 们 这 个 例子 中 所 要 用 到 的 全 局 数组 变量 : 
var circles = |]; 
剩 下 的 代码 也 不 难 。 在 用 户 单 击 Add Circle 按 钮 创建 新 的 圆圈 时 , 就 会 触发 addRandomCircle() 
陋 数 。addRandomCircle() 困 数 会 以 随机 大 小 、 颜 色 和 坐标 值 绘 制 一 个 圆圈 : 
function addRandomCircle() { 
// 为 圆圈 计算 一 个 随机 大 小 和 位 置 
var radius = randomFromTo(10, 60); 


var x = randomFromTo(0, canvas.width); 
var y = randomFromTo(O, canvas.height); 





























//73 A ER E -— A R8 URL é 

var colors - ["green", "blue", "red", "yellow", "magenta", 
"orange", "brown", "purple", "pink"]; 

var color = colors[randomFromTo(O, 8)]; 


// 创 建 一 个 新 圆圈 
var circle = new Circle(x, y, radius, color); 


// 把 它 保存 在 数组 中 
circles.push(circle); 


// 重 新 绘制 画布 
drawCircles(); 


) 

以 上 代码 也 利用 了 另 一 个 自 定 义 困 数 randomFromTo() , 它 在 某 个 范围 内 生成 随机 数 。( 要 查看 
全 部 代码 ， 请 访问 www.prosetech.com/html5。 ) 

最 后 一 步 当 然 就 是 基于 当前 圆圈 的 集合 实际 地 在 画布 上 绘图 了 。 创 建新 圆圈 后 ， 
addRandomCircle() 调 用 了 另 一 个 鲜 数 drawCircles() 来 执行 绘图 操作 。drawCircles() KA Am 
圆圈 数组 ， 像 下 面 这 样 : 


for(var i=0; i«circles.length; i++) { 
var circle = circles[i]; 
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VI EA npnrsgmyforfü&s8 CHEATS AS INIEB). HA o PBEMVRSSUEDOS RET BILD 
会 运行 一 次 。 第 一 行 代码 和 完 从 数组 中 取得 当前 圆圈 ， 将 其 赋 给 一 个 变量 ， 以 方便 后 面 使 用 。 
下 面 就 是 drawCircles() 国 数 的 完整 代码 ， 它 的 任务 就 是 根据 当前 圆圈 的 集合 来 填充 画布 : 
function drawCircles() { 
// 清 除 画 布 ， 准 备 绘制 
context.clearRect(O, O, canvas.width, canvas.height); 


context.globalAlpha = 0.85; 
context.strokeStyle = "black"; 














// 遍 历 所 有 圆圈 
for(var i-0; i«circles.length; i++) { 
var circle - circles[i]; 
//2z 58) A B] 
context.beginPath(); 
context.arc(circle.x, circle.y, circle.radius, O0, Math.PI*2); 
context.fillStyle = circle.color; 


context.fill(); 
context.stroke(); 


注意 圆圈 绘图 程序 每 次 刷新 和 画布， 都 会 先 使 用 clearRect() 方 法 清除 画布 上 的 所 有 内 容 。 有 些 
极其 追求 完美 的 程序 员 就 担心 这 一 步 操 作 会 造成 画布 闪烁 ， 即 画布 上 的 圆圈 一 下 全 都 消 
失 ， 然 后 一 下 子 又 重新 出 现 。 不 过 ，Canvas 针 对 这 个 问题 进行 了 优化 。 换 名 话说， 它 实 
际 上 会 在 绘图 逻辑 执行 完毕 后 才 清 除 或 绘制 所 有 内 容 ， 因 此 可 以 把 最 终结 果 流 畅 不 间断 
地 复制 到 画布 上 。 








现在 ， 圆 疾 仍 然 还 没有 交互 性 。 不 过 ， 页 面 中 用 于 记录 绘制 的 每 个 圆 疾 的 代码 已 经 齐备 了 。 
尽管 画布 看 上 去 仍然 还 是 彩色 像 系 块 , 但 我 们 的 代码 知道 画布 所 有 圆圈 的 精确 信息 。 而 这 就 意味 
者 可 以 随时 操作 这 些 圆 疾 。 

下 一 市 ， 我 们 束 来 看 看 如 何在 此 基础 上 让 用 户 选 择 圆 峰 。 


7.3.2 ”基于 坐标 的 碰撞 检测 


只 要 创建 交互 图 形 ， 几 乎 就 一 定 要 用 到 碰撞 检测 ， 也 就 是 测试 某 个 点 是 否 “ 碰 到 ”了 茶 个 图 
形 。 在 绘制 圆圈 的 程序 中 , 我 们 需要 检测 用 户 单 击 的 点 是 否 碰 到 某 个 圆圈 ， 或 者 只 是 点 击 了 空 日 
区 域 。 

一 些 比较 完善 的 动画 开发 框架 ( 比如 Flash 或 Silverligh ) 可 以 帮 你 做 碰撞 检测 。 虽然 也 有 一 些 
针对 Canvas 的 JavaScript 库 ( 如 Kinetic JS ) 能 提供 这 种 方便 ,但 在 本 书 编号 时 还 没有 哪个 足够 成 
识 ， 所 以 在 此 就 不 推荐 了 。 好 吧 ， 还 得 我 们 自己 动手 来 号 碰撞 检测 的 代码 。 

为 检测 碰撞 是 否 发 生 ， 就 要 检测 每 一 个 形状 ,计算 女 标 点 击 的 那个 点 是 否 落 在 某 个 形状 里 。 
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如 条 是 ， 资 明 单 击 “ 碰 到 ”了 该 形状 。 分 析 起 来 倘 单 ， 而 实现 起 来 可 就 远 没 有 那么 容易 了 。 
第 一 件 事 儿 束 是 志 历 所 有 形状 。 这 个 循环 与 前 面 drawCircles() 困 数 所 用 的 循环 有 一 点 不 同 : 


for (var i=circles.length-1; i»-0; i--) ( 
var circle - circles[i]; 





Jj 

不 同 之 处 是 这 里 的 代码 在 反 回 过 历数 组 : 从 末尾 开 妈 (末尾 的 索引 等 于 数组 中 包含 的 元 素数 
减 1 )， 癌 开头 迭代 (第 一 个 元 系 的 索引 为 0 )。 这 里 的 反 回 明 历 是 有 意 为 之 的 ， 因 为 在 大 多 数 应 用 
中 (包括 我 们 这 个 )， 都 会 按照 数组 中 列 出 对 象 的 顺序 来 绘制 对 象 。 绪 果 ， 后 来 的 对 象 可 能 就 会 
辣 加 在 先前 对 象 上 面 。 而 在 两 个 形状 著 加 起 来 后 ， 那 么 单 击 的 只 能 是 上 面 的 那个 对 象 。 

要 确定 单 击 点 是 否 位 于 形状 内 ， 需 要 一 些 数 学 计算 。 对 于 圆圈 而 言 ， 需 要 计算 单 击 点 与 圆心 
的 直线 距离 。 如 采 这 个 距离 小 于 等 于 圆圈 半径 ， 那 么 就 可 以 确定 单 击 点 位 于 圆圈 内 。 

在 我 们 这 个 例子 中 ， 页 面 会 处 理 Canvas 的 onClick 事 件 ， 以 检测 被 单 击 的 圆圈 。 当 用 户 单 击 
画布 时 ， 束 会 触发 canvasClick() 函 数 。 这 个 孔 数 会 取得 单 击 点 的 坐标 ， 然 后 检测 该 坐标 是 否 位 
于 某 个 圆圈 内 : 


function canvasClick(e) { 
// 取 得 画布 上 被 单 击 的 点 
var clickX = e.pageX - canvas.offsetLleft; 
var clickY = e.pageY - canvas.offsetTop; 















































// 查 找 被 单 击 的 圆圈 
for (var i=circles, Length; i»0; i--) ( 
// 使 用 匀 股 定理 计算 这 个 点 与 圆心 之 间 的 距离 


var distanceFromCenter = 
Math.sqrt(Math.pow(circle.x - clickX, 2) + Math.pow(circle.y - clickY, 2)) 


// 这 个 点 在 圆圈 中 吗 
if (distanceFromCenter <= circle.radius) { 
// 清 除 之 前 选择 的 圆圈 
if (previousSelectedCircle !- null) { 
previousSelectedCircle.isSelected - false; 


j 


previousSelectedCircle = circle; 


// it A 3 UR] A 
circle.isSelected = true; 


// 更 新 显示 
drawCircles(); 


// 停 止 搜索 
return; 
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注意 ”在 7.5.3 节 创建 迷宫 游戏 时 ， 我 们 还 会 看 到 另 一 种 碰撞 检测 : 取得 原始 像素 ， 比 较 它 们 的 
颜色 。 








这 个 例子 的 最 后 ， 要 稍微 调整 一 下 drawCircles() 函 数 中 的 代码 。 现 在 ， 应 该 为 被 选择 圆圈 
加 点 标记 ， 让 它 突出 出 来 ( 如 前 所 述 ， 这 里 会 加 上 一 个 粗 边 框 ): 


function drawCircles() { 


// 循 环 所 有 圆圈 
for(var i=0; i«circles.length; i++) { 
var circle = circles[il; 


if (circle.isSelected) ( 
context.lineWidth - 5; 
} 


else { 
context.lineWidth = 1; 


) 
pen 

) 

这 个 例子 当然 还 可 以 更 加 完善 ， 功 能 更 强大 。 例 如 ， 可 以 添加 一 个 命令 工具 条 ,用 于 修改 圆 
圈 〈 修改 颜色 或 把 它 从 画布 上 删除 )。 或 者 ， 人 允许 用 户 在 画布 上 拖 动 圆圈 。 为 此 ， 只 要 侦 听 Canvas 
的 onMouseMove 事 件 ， 相 应 地 修改 圆圈 的 坐标 ,然后 再 调用 drawCircles() 据 数 重 绘画 布 即 可 。( 这 
其 实 就 是 6.2.2 节 讨论 的 简单 画图 应 用 所 使 用 的 技术 ,只 不 过 现在 是 基于 鼠标 移动 来 画图 ,而 非 画 
线 。) 本 书 试 验 站 点 (www.prosetech.com/html5 ) 中 的 InteractiveCircles WithDrag.html 页 面 ， 包含 
了 一 个 演示 这 种 技术 的 例子 。 

记 住 这 个 要 点 : 只 有 记录 绘制 的 所 有 内 容 ， 才 能 在 将 来 姑 活 地 修改 并 重 绘 它们 。 








7.4 ”给 Canvas 添加 动画 


绘制 一 幅 完 美的 图 画 已 经 够 复杂 的 了 , 所 以 就 算是 经 验 丰 让 的 开发 人 员 , 让 他 实现 每 秒 绘制 
几 十 个 图 形 的 程序 ,也 难免 不 眉头 又 锁 。 做 动画 的 关键 是 绘制 和 重 绘画 布 的 速度 要 足够 快 ,这 样 
才能 让 人 感觉 移动 和 变化 自然 流畅 。 

动画 对 某 些 应 用 来 说 可 以 是 最 基本 的 ， 比 如 实时 诉 戏 、 物 理 醒 拟 硕 。 不 过 ， 比 较 简 单 的 
动画 在 包含 Canvas 的 页 面 中 同样 大 有 用 武之 地 。 可 以 通过 动画 来 突出 用 户 交 互 〈《 例 如 ， E 
exis E, Z6 ADEL EXE. LEBDE ESI EXAM ), 也 可 以 利用 动画 效 宁 来 吸引 人 注意 改变 的 
内 容 ( 例如, 淡 入 新 场景 ,或 创建 “长 ”到 恰当 位 置 的 图 形 、 图 表 )。 如 此 说 来 ,动画 确实 是 


























为 网 页 增光 增 彩 的 强大 手段 ， 能 给 人 活生生 的 感觉 ， 而 且 还 能 玫 我 们 从 一 大 堆 苋 争 者 中 脱 突 
而 出 。 
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7.4.1 基本 的 动画 


在 HTML5 中 利用 Canvas 实 现 动 画 非 党 容易。 首先， 要 设置 一 个 定时 右 ， 反 复 调 用 绘图 消 数 
(一 般 每 秒 30 ~ 40 次 )。 每 次 调用 ， 都 会 重 绘 整个 画布 。 完 成 后 的 效果 就 像 动 画 一 样 ， -Wi TEJ ÉS 
过 渡 会 平 消 而 流畅 。 
JavaScript 为 控制 重复 绘制 提供 了 两 种 手段 。 
O 使 用 setTimeout() 函 数 。 这 个 函数 告诉 训 览 规 等 待 多 长 时 间 〈 毫秒 )， 然 后 再 运行 一 段 代 
fU ( 即 绘制 画布 的 代码 )。 运 行 代码 后 ， 可 以 再 调用 setTimeout() 让 浏览 硕 准 备 下 一 次 运 
行 。 如 此 往复 ， 下 至 动画 结 

O 使 用 setInterval() 函 数 。 这 个 因数 告诉 浏览 需 每 隔 一 定时 间 〈 如 20 军 秒 ) 就 运行 某 一 段 
代码 。 它 与 setTimeout() 的 效果 类 似 , 但 只 需 调 用 setInterval() 一 次 。 要 阻止 浏览 硕 继 续 
运行 代码 ， 可 以 调用 clearInterval() 。 

假如 运行 绘图 代码 的 速度 非常 快 , 使 用 这 两 个 函数 都 可 以 ,结果 都 一 样 。 可 假如 绘图 代码 没 
那么 快 ，setInterval() 则 能 保证 精确 地 按时 重 绘 ， 但 又 可 能 因此 牺牲 性 能 。( 最 差 的 情况 下 ， 如 
果 绘 图 代码 执行 时 间 比 设 定 的 时 间 还 要 长 , 浏览 器 将 很 难 跟 上 ， 随 着 绘图 代码 连续 执行 ,页面 会 
出 现 短 暂 地 停顿 ) 考虑 到 这 个 原因 ， 本 章 的 例子 都 使 用 setTimeout () KZŽ. 

调用 setTimeout() 时 ， 要 提供 两 个 参数 : 要 运行 的 函数 名 和 运行 该 限 数 之 前 等 待 的 时 间 。 这 
里 的 时 间 要 使 用 毫秒 (于 分 之 一 秒 )， 因 此 20 毫 秒 〈 典 型 的 动画 延迟 时 间 ) 就 是 0.02 秒 。 来 看 下 
面 这 个 例子 : 


var canvas; 
var context; 


























window.onload = function() ( 
canvas = document.getElementById("canvas"); 
context = canvas.getContext("2d"); 


// 每 0.02 秒 绘制 一 次 画布 
setTimeout("drawFrame()", 20); 


Jj 

任何 动画 的 关键 都 在 于 调用 setTimeout()。 例如， 要 想 编 写 一 个 方形 从 上 到 下 坠落 的 动画 ， 
就 需要 像 下 面 这 样 用 两 个 全 局 变量 跟踪 方形 的 位 置 : 

// 设 置 方形 的 初始 位 置 


var squarePosition y = 0; 
var squarePosition x = 10; 


接 下 来 ， 只 要 在 每 次 调用 drawFrame() 函 数 时 改变 方形 的 位 置 ， 然 后 在 新 位 置 重 绘 方形 
Bn] : 


function drawFrame() { 
// 清 除 画 布 
context.clearRect(O, 0, canvas.width, canvas.height); 








// 调 用 beginPath()， 确 保 不 会 接着 上 次 绘制 的 图 形 绘 制 
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context.beginPath(); 


// 在 当前 位 置 绘制 10 像 素 x 10 像 素 的 方形 
context.rect(squarePosition x, squarePosition y, 10, 10); 
context.lineStyle = "black; 

context.lineWidth - 1; 

context.stroke(); 


// 向 下 移动 1 像素 (下 一 帧 将 在 此 位 置 绘制 ) 


squarePosition y += 1; 


//20 毫 秒 后 绘制 下 一 帧 
setTimeout("drawFrame()", 20); 


} 

运行 这 个 例子 ， 就 会 看 到 一 个 方形 从 画布 上 方 不 断 下 阔 ， 最 后 消失 在 画布 下 方 。 

如 琳 动 夯 更 复杂 ,计算 过 程 也 会 相应 复杂 。 比 如 ， 要 模拟 重力 加 速度 ,或 者 模拟 方形 撞 
击 压 边 后 反弹 。 但 “设置 计时 各 、 调 用 绘制 函数 和 重 绘 整个 画布 ”这 个 基本 过 程 郡 吓 完全 相 
同 的 。 


7.4.2 多 物体 动画 


Vf Y, 既然 都 介绍 了 动画 和 交互 绘制 画布 的 基本 知识 ， 下 面 我 们 就 更 进一步 ,把 这 些 知 识 综 
合 起 来 运用 到 一 个 例子 中 。 图 7-10 展 示 了 一 个 测试 页 面 ， 其 中 有 多 个 下 落 和 弹跳 的 球 。 这 个 例子 
使 用 了 上 一 市 用 到 的 setTimeout() 方 法 ， 而 此 次 绘制 代码 必须 支持 无 数 个 下 沙 的 小 球 。 











动画 的 性 能 问题 

由 于 绘制 速度 很 快 ， 因 此 与 基本 的 绘图 操作 相 比 ， 动 画 对 和 画布 的 要 求 要 高 得 多 。 但 出 
人 意料 的 是 ,画布 并 没有 反应 迟钝 。 这 是 因为 现代 浏览 器 都 使 用 了 硬件 加 速 等 性 能 增强 技术 ， 
把 图 形 处 理工 作 转 移 给 了 显卡 ， 从 而 节省 了 CPU。 即 使 JavaScript 不 是 现 有 最 快 的 语言 ， 但 
仍然 可 以 利用 它 来 创造 出 复杂 、 高 速 的 动画 ， 甚 至 是 实时 电子 游戏 只 要 有 脚本 和 画布 
BPT, 

然而 ， 对 于 移动 设备 (比如 iPhone 或 Android 手 机 ) 来 说 ， 由 于 能 力 不 足 ， 性 能 就 是 一 个 
问题 了 。 WRAHA, 在 桌面 浏览 器 中 运行 速度 达 每 秒 60 帧 的 动画 ,在 每 能 手机 中 最 高 才能 达到 
每 秒 10 帧 。 因 此 ， 要 是 想 为 手机 用 户 开 发 应 用 ,， 一定 要 尽早 测试 并 准备 牺牲 一 些 夺 人 眼目 的 动 
画 效 果 ， 从 而 确保 应 用 运行 流畅 。 





提示 静态 图 片 当 然 反 映 不 出 动画 效果 了 。 要 党 试 一 下 图 7-10 所 示 的 动画 ,可 以 访问 WWw.prose- 
tech.com/html5 。 
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PMIY — ANNE 图 7-10， 在 这 个 测试 页 面 


[Animatio Y Cà |. Animation Y A 


CQ Q Animation. html | CQ Q Animation. html | 中 ; oj 以 添加 任意 多 个 球 


| 可 以 选择 球 的 大 小 ( 默认 
半径 为 15 像 素 ) ， 还 可 以 
打开 连 线 功 能 ( 右 图 ) 。 
添加 每 个 球 之 后 ， 这 个 球 
就 会 独立 运动 ， 加 速 向 下 
坠落 ， 直 至 磁 到 画布 底 边 
弹 回来 














Add Bali | | Clear Canvas | | Add Bali | | Clear Canvas | 








Ball Size: 15 $ Connect Balls Ball Size: 15 $ 7| Connect Balls 























要 管理 这 些 球 ,需要 用 到 7.3.1T 讨 论 的 目 定 义 对 象 。 只 不 过 现在 需要 记录 很 多 球 对 象 ， 而 每 
个 球 对 象 不 仅 要 有 位 置 〈 属 性 x 和 y )， 还 要 有 速度 〈 属性 dx 和 dy ): 

// 下 面 就 是 用 于 表示 球 的 所 有 细节 的 Ball 剖 数 

function Ball(x, y, dx, dy, radius) ( 


this.x = x; 
this.y = y; 


this.dx = dx; 
this.dy = dy; 


this.radius = radius; 
this.color = "red"; 


} 


// 这 个 数组 用 于 保存 画布 上 出 现 的 所 有 球 
var balls = [|]; 


注意 ”用 数学 书 里 的 说 法 ，dx 就 是 x 改 变 的 速度 ， 而 dy 就 是 y 改 变 的 速度 。 因 此 ， 随 着 球 的 下 落 ， 
每 一 帧 Xx 都 会 增加 dx， 而 y 都 会 增加 dy。 


用 户 单 击 Add Ball 按 钮 后 ， 几 行 代码 会 执行 : 创建 一 个 新 的 ball 对 象 并 将 其 保存 在 balls 数 
组 中 : 


function addBall() { 


// 取 得 用 尸 设 定 的 大 小 
var radius = parseFloat(document.getElementById("ballSize").value); 


// 创 建新 的 bal1 对 象 
var ball = new Ball(50,50,1,1,radius); 
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// 将 其 保存 在 balls 数 组 中 
balls.push(ball); 


Clear Canvas 按 钮 的 任务 恰恰 相反 一 一 清空 ba11s 数 组 


function clearBalls() { 


// 删 除 所 有 球 对 象 
balls = []; 


) 

nj, addBall()flclearBalls()PAZI bs ESAE: 它们 都 没有 调用 绘制 水 数 。 实 
际 上 ， 调 用 drawFrame() 函 数 的 代码 会 在 页 面 加 载 后 计时 执行 ， 每 隔 20 上 毫秒 就 重 绘 一 次 画布 : 

var canvas; 


var context; 


window.onload = function() { 
canvas = document .getElementById("canvas"); 
context = canvas.getContext("2d"); 


// 每 20 毫 秒 重 绘 一 次 
setTimeout("drawFrame()", 20); 


}; 

drawF rame () KÄES fT ARENE, 它 不 仅 负 责 在 画布 上 绘制 所 有 球 , 而 且 还 要 计算 每 
个 球 的 当前 位 置 和 速度 。 为 此 ，drawFrame() 子 数 使 用 了 一 些 计 算 方法 模拟 真实 的 运动 。 比 如 ， 
险 落 时 加 速 ， 而 反弹 时 减速 。 下 面 就 来 看 看 它 的 完整 代码 : 


function drawFrame()  // 清 除了 画布 
context.clearRect(0, 0, canvas.width, canvas.height); 
context.beginPath(); 











// 循 环 所 有 球 
for(var i-0; i«balls.length; i++) { 
// 把 每 个 球 移动 到 新 位 置 
var ball = balls[i]; 
ball.x += ball.dx; 
ball.y += ball.dy; 


// 添 加 重力 作用 的 效果 ， 让 球 加 速 下 落 
if ((ball.y) « canvas.height) ball.dy += 0.22; 


// 添 加 摩擦 力 作用 的 效果 ， 减 慢 左右 移动 速度 
ball.dx = ball.dx * 0.998; 


// 如 果 球 碰 到 某 一 边 ， 就 反弹 回来 


if ((ball.x + ball.radius > canvas.width) || (ball.x - ball.radius < 0)) { 
ball.dx = -ball.dx; 


j 


// 如 果 球 碰 到 底部 ， 反弹 回 来 ， 但 慢 慢 地 减速 
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if ((ball.y + ball.radius > canvas.height) || (ball.y - ball.radius « 0)) 


ball.dy = -ball.dy*0.96; 
j 


// 检 测 用 户 是 否 选择 了 连 线 功能 

if (!document.getElementById("connectedBalls").checked) { 
context.beginPath(); 
context.fillStyle = ball.fillColor; 

} 

else 1 
context.fillStyle = "white"; 


j 


// 绘 制 球 

context.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2); 
context.lineWidth = 1; 

context . fi11(); 

context .stroke(); 


) 
//20 毫 秒 后 绘制 下 一 帧 


setTimeout("drawFrame()", 20); 


j 


提示 “如 果 有 读者 不 太 理 解 计 语句 的 作用 ， 不 太 清楚 ! 和 || 等 操作 符 的 意思 ， 可 以 参考 附录 B。 











一 下 子 看 到 这 么 多 代码 ,是 不 是 有 点 害怕 ? 别 紧张 , 整体 流程 并 没有 变 。 以 上 代码 执行 了 下 
列 任务 : 

(1) 清除 画布 ; 

(2) 循环 球 的 数组 ; 

(3) 调整 每 个 球 的 位 置 和 速度 ; 

(4) 绘制 每 个 球 ; 

(5) HHH setTimeout () LE EI 202 Fb ETC T— 3X drawFrame() KIZ. 





其 中 第 3 步 相 对 最 复 休 ， 因 为 球 的 属性 是 在 这 一 步 改 变 的 。 根 据 要 实现 的 效 末 ， 这 里 的 
代码 可 能 比 现在 还 要 复杂 很 多 倍 。 渐 进 地 、 目 然 地 运行 非常 难 模 仿 , 因此 往往 需要 很 多 数学 





计算 . 

最 后 ， 既 然 每 个 球 的 状态 都 有 记录 ， 那 么 接 下 来 为 画布 放 加 交互 功能 也 就 不 难 了 。 实 际 上 ， 
这 里 仍然 可 以 使 用 7.3.2 市 中 的 碰撞 检测 代码 ,只 不 过 此 时 在 单 击 球 的 时 候 , 需要 以 其 他 方式 给 出 
啊 应 。 比 如 ， 可 以 让 被 单 击 的 球 突然 加 速 ， 让 它 癌 某 个 方 回 弹 开 。( 实现 这 种 啊 应 的 示例 页 面 从 
www.prosetech.com/html5 下 和 载 。) 





194 | 第 7 章 高 级 Canvas 技术 


忙 人 (或 懒 人 〉 的 画布 动画 

难道 所 有 计算 都 要 我 自己 费 脑 子 吗 ? 

画布 最 大 的 缺点 就 是 一 切 都 需要 你 自己 费 脑子 。 比 如 , 要 想 让 一 张 图 片 从 画布 一 边 飞 到 另 
一 边 ， 你 得 自己 计算 图 片 在 每 一 帧 中 的 位 置 ， 然 后 再 在 该 位 置 上 绘制 图 片 。 而 如 果 同 时 要 以 不 
同方 式 为 不 同 的 东西 添加 动画 ， 那 么 代码 就 会 变 得 很 杂乱 。 相 对 而 言 ， 使 用 Flash 或 Silverlight 
的 程序 员 的 日 子 就 好 过 一 些 了 。 这 两 种 技术 都 内 置 了 动画 机 制 ， 开 发 人 员 只 要 给 出 类 似 “ 用 45 
秒 时 间 把 这 个 图 形 从 这 儿 移 动 到 那儿 ”之 类 的 指令 即 可 。 其 至 可 以 说 :“ 把 这 个 图 形 从 窗口 顶 
部 移动 到 底部 ， 要 加 速 下 落 ， 反 弹 时 应 该 温和 一 些 。 

说 不 定 哪 一 和 天， 就 会 有 人 给 画布 添加 这 么 一 套 机 制 。 到 时 候 , 利用 该 机 制 应 该 可 以 选择 想 
要 的 效果 ， 而 不 必 费 尽心 机 地 算计 数字 。 这 套 机 制 很 可 能 会 以 JavaScript 库 的 形式 出 现 ， 而 不 
会 由 HTML 规范 来 定义 。 显 然 ， 现 在 还 不 是 讨论 哪些 工具 功能 最 强大 、 最 稳定 ， 受 支持 程度 最 
高 的 时 候 。 

要 想 知 道 这 个 例子 做 到 极致 是 什么 样 的 ， 可 以 看 看 这 个 谷歌 弹跳 球 : http://tinyurl.com/ 
6byvnkS$。 在 没有 鼠标 介入 的 情况 下 ， 这 些 球 就 像 有 磁性 一 样 拼 成 “Google” 字 样 。 在 鼠标 移动 
到 其 中 后 ， 小 球 像 是 受到 了 排斥 ， 向 画布 的 四 周 扩散 ， 然 后 不 规则 地 反弹 回来 。 如 果 看 了 这 个 
例子 还 不 满足 ， 再 推荐 两 个 给 你 : 一 个 是 迟钝 的 水 滴 〈http:/www. blobsallad.se )， 另 一 个 是 有 点 
老 套 的 星空 效果 (http//tinyurl.com/crn3ed ). 


7.5 实例 迷宫 游戏 


到 目前 为 止 ,我 们 已 经 学 习 了 针对 画布 编程 的 基本 技术 ,学习 了 画布 的 交互 功能 和 动画 效 末 。 
运用 这 些 基 本 的 技术 , 不 仅仅 能 绘图 ,而且 可 以 实现 完整 的 应 用 ， 比 如 游戏 或 Flash 风 格 的 迷你 应 
用 等 。 

图 7-11 展 示 了 一 个 更 有 挑 成 性 的 例子 ， 这 个 例子 利用 了 迄今 所 学 ， 包 括 两 个 概念 。 实 际 上 ， 
这 是 一 个 简单 的 游戏 , 让 用 户 引 叶 一 个 可 爱 的 小 笑脸 图 标 走出 迷宫 。 用 户 按 下 方 疝 键 时 ,笑脸 图 
标 会 沿 相 应 方 同 移动 ( 动画 )， 由 到 载 时 ( 碰撞 检测 ) 就 会 停 下 来 。 

当然 ， 一 分 耕 靶 一 分 收 获 。 要 想 利用 画布 实现 这 种 高 级 应 用 ， 就 得 多 编写 很 多 代码 。 接 下 来 
的 几 市 会 详细 介绍 这 个 例子 的 开发 过 程 ， 不 过 在 此 之 前 ， 建 议 你 多 学 点 JavaScript 备 用 。 




















注意 ”如果 你 使 用 IE9， 可 以 在 本 地 计算 机 中 运行 这 个 例子 。 如 果 你 使 用 其 他 浏览 器 ， 那 么 只 有 
把 页 面 ( 和 其 中 用 到 的 图 像 ) 上 传 到 Web 服 务 器 才 行 。 为 节省 时 间 ， 也 可 以 到 
Wwww.prosetech.com/html5 直接 查 看 这 个 例子 。 
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E B CAHTML5\Chapter 07\Maze.html v n $4 t9? Uns 引导 关 脸 走出 迷宫 。 对 于 用 
es T T mmi ms 户 来 说 ， 这 是 个 好 玩 的 游戏 。 ATF 
发 者 来 说 ， 可 以 借以 熟悉 HTML5 的 
Canvas 和 JavaScript 编 程 技巧 




















Load Easy Maze | | Load Hard Maze 














7.5.1 布置 迷宫 


在 一 切 发 生 之 前 , 需要 在 页 面 中 设置 画布 。 当 然 可 以 手工 绘制 迷宫 的 线条 或 矩形 , 但 这 样 就 
斋 要 编写 很 多 代码 。 手工 编 写 这 些 代 码 极其 烦 玉 。 你 得 在 大 脑 中 想象 一 个 迷宫 ,然后 再 用 独立 的 
绘图 操作 绘制 每 一 堵 墙 。 要 是 你 真 打算 这 样 做 ， 应 该 使 用 能 够 自动 创建 绘图 代码 的 工具 。 例 如 ， 
可 以 在 Adobe Illustrator 里 绘图 ， 然 后 使 用 插件 导出 画布 代码 ( 参见 6.1.4 市 )。 

另 一 种 思路 是 选择 一 幅 迷 宣 岁 片 ,把 整 幅 网 绘制 到 画布 上 。 这 个 办 法 就 简单 多 了 ， 因 为 在 网 
上 可 以 找到 很 多 能 生成 迷宫 的 免费 页 面 。 找 到 某 个 页 面 后 ， 设 置 一 些 参数 (如 迷宫 大 小 、 形 状 、 
颜色 、 蜜 度 和 复杂 性 )， 页 面 就 能 创建 一 个 可 下 载 的 图 片 。( 想 试 试 ? 用 Google 搜 索 maze 
generator. ) 

RIANA TEHER. MUAMER, ABUS KE CA ymaze.png )， 然 后 把 
它 绘 制 到 画布 上 。 以 下 就 是 实现 上 述 过 程 的 代码 : 


// 定 义 全 局 变量 ， 保 存 画布 及 绘图 上 下 文 
var canvas; 
var context; 
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window.onload = function() { 
/[ ix X. BA 
canvas = document.getElementById(" canvas"); 
context = canvas.getContext("2d"); 


// 绘 制 迷宫 背景 
drawMaze("maze.png", 268, 5); 


// 当 用 户 按 下 键盘 上 的 键 时 ， 运 行 processKey() 函 数 
ML = processKey; 
以 上 代码 并 没有 目 己 绘制 迷宫 背景 ， E PKZ 
Hi TARS MEAR, Aea ELS a HARI P3. HEBES 
drawMaze()HT £z AGAS Ex ES Fr BC FA ELS Bee DV. Er. CRI AREE SLE o P TUA: 
绘制 迷宫 的 drawMaze() PRX : 
// 记 录 医 脸 图 标的 当前 位 置 


Var X20; 
var y = 0; 














function drawMaze(mazeFile, startingX, startingY) { 
// 加 载 迷 宫 图 片 
imgMaze = new Image(); 
imgMaze.onload = function() { 
// 调 整 画布 大 小 以 适应 迷宫 图 片 
canvas.width = imgMaze.width; 
canvas.height = imgMaze.height; 


// 绘 制 迷宫 
var imgFace = document.getElementById("face"); 
context.drawImage(imgMaze, 0,0); 


// 绘 制 笑脸 
X = startingX; 
y = startingY; 


context.drawImage(imgFace, x, y); 
context.stroke(); 


//10& 49 Je 22^] TF — P 
setTimeout("drawFrame()", 10); 
n 
imgMaze.src - mazeFile; 


} 

以 上 代码 使 用 了 7.1.1 节 介绍 的 两 步 绘制 图 像 的 方法 。 首 先 ， 定义 一 个 处 理 图 片 onLoad 事 件 并 
在 图 片 加 载 完毕 后 绘制 迷宫 的 函数 。 其 次 ， 它 设置 了 图 片 对 象 的 src 属 性 ， 这 样 就 会 加 载 图 片 并 
在 加 载 完 触发 事件 处 理 函 数 。 与 从 隐藏 的 <img> 元 素 中 取出 图 片 相 比 ， 这 个 两 步 方 法 稍微 复 
杂 那 么 一 点 ， 但 为 了 让 函数 足够 灵活 ， 可 以 加 载 任意 迷宫 图 片 ， 就 必须 采取 这 种 方法 。 

andi 图 片 后 ， 代 码 会 根据 图 片 大 小 调整 画布 的 大 小 ， 把 笑脸 图 标 放 到 正确 的 位 置 上 ， 
然后 绘制 笑脸 图 标 。 最 后 ， 调 用 setTimeout() 开 始 绘制 动画 帧 。 
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注意 ”我 们 的 试验 网 站 ( www.prosetech.com/html5 ) 中 的 这 个 例子 还 要 复杂 一 些 , 主要 是 支持 用 
户 在 任何 时 候 加 载 新 的 迷宫 ， 即 使 笑脸 图 标 在 当前 迷宫 中 行进 期 间 也 可 以 。 为 此 ， 那 个 
例子 在 drawMaze() 品 数 中 添加 了 一 些 代 码 ， 用 于 停止 笑脸 图 标 ( 如 果 正 在 行进 的 话 )， 终 
止 动画 进程 ， 然 后 重新 加 载 背 景 ， 重 新 开始 。 


7.5.2 ”让 笑脸 动 起 来 


在 用 户 按 下 键盘 上 的 方向 键 时 ,笑脸 开始 移动 。 比 如 ， 按 向 下 键 ， 实 脸 束 会 一 二 问 下 移动 ， 
不 是 碰 到 障碍 或 用 户 又 按 了 其 他 方向 键 ， 就 不 会 俘 下 来 。 

为 此 ， 我 们 在 代码 中 需要 使 用 两 个 全 局 变量 记录 笑脸 的 速度 。 换 句 话 说， 就 是 记录 笑脸 在 x 
和 y 轴 方向 上 每 一 帧 要 移动 多 少 像 系 。 这 两 个 变量 就 是 dx 和 dy， 与 上 一 市 弹跳 球 例子 中 的 一 样 。 
区 别 在 于 ， 这 个 例子 不 会 用 到 数组 ， 因 为 只 有 一 个 笑脸 图 标 : 


var dx = 0; 
var dy = 0; 


用 户 按 下 键盘 上 的 键 时 ， 男 布 就 会 调用 processKey() 函 数 。 然 后， 该 函数 检查 用 户 按 下 的 是 
不 是 方 同 键 ,然后 据 以 调整 笑脸 的 速度 。 为 了 检测 方向 键 , 要 用 已 知 的 值 与 用 户 按 下 键 的 键 码 进 
行 比较 。 比 如 ，38 是 向 上 键 的 键 码 。processKey() 隐 数 会 忽略 除 方 向 键 之 外 的 按键 : 


function processKey(e) { 
// 如 果 笑 脸 在 移动 ， 停 目 
dx = 0; 
dy = 0; 





























// 按 下 了 向 上 键 ， 向 上 移动 

if (e.keyCode == 38) { 
dy = -1; 

J 


// 按 下 了 向 下 键 ， 向 下 移动 

if (e.keyCode -- 40) { 
dy = 1; 

} 

[14 F T RER, mp ARS) 


if (e.keyCode == 37) { 
dx = -1; 


} 
// 按 下 了 向 右键 ， 向 右 移动 
if (e.keyCode -- 39) { 
dx = 1; 
} 
} 
从 代码 中 可 见 ，processKey() 函 数 并 不 改变 笑 脸 的 当前 位 置 ， 也 没有 绘制 括 脸 。 在 调用 了 


drawFrame() 国 数 之 后 ， 每 隔 10 坚 秒 就 会 执行 一 次 这 种 检测 任务 。 
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Bi Fo drawFrame()PRZX, ix T KRRIT, RHESWM o xx RA 
行 儿 个 任务 ， 首 先是 检测 笑脸 是 否 正在 哪个 方向 上 移动 。 如 采 不 是 ， 则 什么 也 不 必 做 : 

function drawFrame() { 

if (dx != 0 || dy != 0) { 

如 果 笑 脸 在 移动 ，drawFrame() 会 在 当前 笑脸 的 位 置 绘制 一 块 和 黄色 背景 (用 于 创造 “痕迹 ” 
感 )， 然 后 把 笑脸 移动 到 下 一 个 位 置 : 

context .beginPath(); 

context.fillStyle = "rgb(254,244,207)'; 


context.rect(x, y, 15, 15); 
context .fill() 











// 增 大 位 置 值 


x += dx; 

y += dy; 

BE PoK, HHcheckForCollision() KZ, AM Ere t ER, C FÉT 
个 碰撞 检测 函数 的 代码 。) WRIMENN, MAREE p Ha, 代码 必须 将 其 放 回 上 一 位 置 并 
停止 移动 它 : 

if (checkForCollision()) { 











X -= dx; 

y -= dy; 

dx = 0; 

dy = 0; 
} 





到 这 里 就 可 以 绘制 突 腔 了 ， 以 下 殊 古 代码 : 
var imgFace = document.getElementById("face"); 
context.drawImage(imgFace, x, y); 


A5. RER e PAE ESER CT D 30). 如 采 是 ， 则 显示 一 个 消息 框 : 


if (y > (canvas.height = 17)) 4 
alert("You win!"); 
return; 


j 
} 


如 条 没有 ， 则 通过 setTimeout() 设 置 在 10 训 秒 之 后 再 次 调用 drawFrame() 方 法 : 


//10 毫 秒 后 绘制 下 一 帧 
setTimeout("drawFrame()", 10); 


Í 

K J checkForCollision() KAŽ, 这 个 例子 的 代码 就 都 介绍 完了 。 下 面 我 们 就 来 介绍 用 于 碰撞 
检测 的 创新 逻辑 。 
7.5.3 ”基于 像素 颜色 的 碰撞 检测 

本 草 前 面 曾 讨论 过 基于 数学 计算 来 实现 碰撞 检测 。 除 此 之 外 , 还 有 另 一 种 手段 。 那 就 是 不 检 
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测 已 经 绘制 了 哪些 对 象 ， 而 是 取得 像素 块 ， 检 测 它 们 的 颜色 。 很 多 情况 下 ， 这 种 手段 更 简单 ， 
为 它 不 涉及 全 部 对 象 , 也 不 必 编 瑟 图 形 记 录 代 码 。 然而 , 这 种 手段 只 适合 能 明确 判断 颜色 的 场合 。 


注意 ”对 于 迷宫 游戏 来 说 ， 基 于 像素 颜色 进行 碰撞 检测 是 最 理想 的 手段 。 利 用 像素 颜色 ， 可 以 
确定 笑脸 什么 时 候 碰 到 黑色 的 墙 。 如 果 不 使 用 这 种 技术 ， 那 么 就 必须 将 迷宫 的 信息 保存 
在 内 存 中 ， 然 后 再 确定 笑脸 的 当前 坐标 是 否 与 迷宫 中 的 某 面 墙 重 党 。 











能 够 基于 像 系 颜色 进行 碰撞 检测 的 关键 , 就 在 于 画布 文 持 对 个 别 像素 (也 就 是 组 成 每 张 图 片 
的 小 点 ) 的 操作 。 绘 图 上 下 文 为 操作 像素 提供 了 三 个 方法 : getImageData()、putImageData() 和 
cTeateImageData()。 其 中 ，getImageData() 用 于 从 矩形 区 域 中 取得 一 个 像素 块 ， 然 后 再 检测 这 些 
像 系 (我 们 的 迷宫 游戏 中 使 用 了 这 个 方法 )。 可 以 修改 像素 使 用 putImageData() 并 将 它们 回 写 到 画 
布 。 最后，createImageData() 用 于 在 内 存 中 创建 新 的 、 空 的 像素 块 ， 以 便 你 根据 自己 的 想法 自 定 
义 其 中 的 像素 ， 然 后 使 用 putImageData() 把 它们 回 写 到 画布 上 。 

为 了 深入 地 理解 这 几 个 操作 像素 的 方法 , 来 看 下 面 这 行 代码 。 这 行 代码 首先 从 当前 画布 上 取 
得 一 个 100 像 素 x 50 像 素 大 的 像素 块 ， 使 用 的 是 getImageData( ) 方 法 : 

















// 取 得 像素 的 起 点 为 (0,0)， 向 右 拓展 100 像 素 ， 向 下 拓展 50 像 素 
var imageData = context.getImageData(0, 0, 100, 50); 


然后 ， 再 通过 data 属 性 取得 一 个 包含 图 像 数 据 的 数值 数组 : 

var pixels = imageData.data; 

可 能 有 读者 会 狂 测 每 个 像 系 部 用 数组 中 的 一 个 数值 表示 。 要 是 那么 简单 丈 好 了 1 实际 上 ， 
个 像素 是 用 4 个 数值 来 表示 的 ， 前 三 个 分 别 表示 红 、 绿 、 蓝 ， 第 四 个 表示 不 透明 度 (alpha 值 )。 
因此 ， 要 检测 每 个 像 系 ， 必 须 四 个 一 组 四 个 一 组 地 表 历 这 个 数组 ， 如 下 所 示 : 


// 人 遍历 每 个 像素 ， 反 转 其 颜色 
for (var i = 0, n = pixels.length; i < n; i += 4) 1{ 








// 取 得 每 个 像素 的 数据 
var red = pixels[i]; 
var green = pixels[i-*1]; 
var blue = pixels[i*2]; 
var alpha = pixels[i+3]; 


// B. 5t XR 6 

pixels[i] = 255 - red; 
pixels[i-1] = 255 - green; 
pixels[i*2] = 255 - blue; 


} 
每 个 数值 的 范围 是 0~255。 上 面 的 代码 使 用 了 最 简单 的 图 像 操作 撤 术 一 一 反 转 颜色 。 如 条 反 
转 的 是 一 张 照 斤 ， 那 么 绪 采 就 像 看 到 其 负 扩 一样 。 
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为 了 看 到 反 转 颜色 后 的 效 朱 ,可 以 把 修改 后 的 像 系 回 写 到 画布 中 原来 的 位 置 上 ( 当然 , 绘制 
SIE fRTHR JT $527 4 5C 5€ ): 

context.putlImageData(imageData, 0, 0); 

能 够 操作 每 个 像素 ， 当 然 为 我 们 控制 画布 提供 了 很 多 可 能 性 。 但 是 ,操作 像 素 也 有 缺点 ， 主 
要 是 操作 速度 慢 ， 而 且 一 般 夯 布 中 包含 的 像素 数目 都 十 分 巨大 。 如 果 取 得 一 大 块 图 片 数据 ， 可 能 
就 需要 遍历 几 万 个 像 系 。 如 果 你 觉得 画 直 线 或 画 曲 线 都 很 烦人 , 那么 手工 处 理 一 个 个 像素 只 会 更 
ZAER. 

但 是 ,操作 像素 能 够 解决 其 他 手段 解决 不 了 的 问题 。 比 如 ,通过 像素 操作 可 以 方便 地 绘制 出 
分 形 图 像 ， 或 者 实现 Photoshop 风 格 的 图 拨 滤 镜 。 而 在 我 们 的 迷宫 诉 戏 中 ， 通 过 像素 操作 可 以 用 
何 单 的 代码 来 确定 笑脸 图 标的 走向 ， 判 断 它 是 否 碰 到 了 墙 。 以 下 就 是 处 理 这 个 任务 的 
checkForCollision()PRZk Bj fV R8 : 























function checkForCollision() { 
// 取 得 笑脸 所 在 的 像素 块 ， 再 稍微 扩展 一 点 
var imgData = context.getlmageData(x-1, y-1, 1542, 1542); 
var pixels - imgData.data; 


// 检 测 其 中 的 像素 
for (var i = 0; n = pixels.length, i < n; i += 4) { 
var red = pixels[i]; 
var green = pixels[i«1]; 
var blue = pixels[i«2]; 
var alpha = pixels[i-*3]; 
// 检 测 黑 色 的 墙 (如 果 检 测 到 
if (red == 0 && green == 0 
return true; 
} 
// 检 测 灰 色 的 边 (如 果 检 测 到 了 ， 就 说 明 撞 墙 了 ) 
if (red == 169 && green == 169 && blue == 169) { 
return true; 


j 


} 
// 没 有 碰 到 墙 
return false; 


} 

QUEE, 我们 迷宫 游戏 页 面 的 代码 束 全 部 介绍 完了 。 这 个 例子 是 本 书 到 目前 为 止 代码 最 长 的 一 
个 例子 。 要 想 完 全 理解 它们 ， 怒 怕 得 多 看 几 所 (或 者 好 好 午 握 一 下 JavaScript )， 而 一 旦 你 看 异 看 
明日 了 它们 ， 束 可 以 在 目 己 的 画布 应 用 中 用 上 类 似 的 技术 本。 





了 ， 就 说 明 撞墙 了 ) 
8& blue == 0) ( 

















有 视觉 冲击 力 的 Canvas 应 用 示例 
利用 Canvas， 可 以 开发 出 不 计 其 数 的 应 用 形式 。 如 果 你 想 知道 通过 HTMLS 画 布 到 底 能 实 
么 神奇 的 效果 ， 可 以 在 网 上 找 。 下 面 也 给 出 几 个 网 站 ,在 其 中 可 以 发 现 一 些 令 人 目眩 的 画 


现 多 


3 
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Q Canvas Demos。 这 个 画布 示例 网 站 中 的 内 容 足 以 让 人 流连 忘 返 。 本 书写 作 时 的 例子 有 
游戏 Mutant Zombie Masters € 突变 僵尸 大 师 》 和 股份 图 工具 TickerPlot。 不 说 了 ， 赶 紧 看 
"E. http://www.canvasdemos.com. 

口 维 基 知 识 地 图 .这 个 令 人 难忘 的 画布 应 用 ,以 图 形 方式 形象 地 展示 了 维基 百科 中 的 文章 。 
不 同 主题 由 网 状 的 细 线 相连 。 选 择 其 中 一 个 主题 , 就 可 以 进入 放大 的 知识 地 图 中 ,然后 
流畅 的 动画 会 把 最 新 的 文章 展示 出 来 。 这 个 网 站 的 地 址 是 http://en.inforapid.org。 

口 3D Walker. 这 个 例子 展示 的 是 一 个 简单 的 3D 围 墙 和 通道 环境 ( 让 人 仿佛 置身 二 战 时 期 
的 德军 总 部 ， 当 然 是 指 那 款 1992 年 发 布 的 开 第 一 人 称 射击 游戏 先河 的 大 作 )。 想 试 一 试 
吗 ? 请 访问 http://www.benjoffe.com/code/demos/canvascape。 

口 国际 象棋 。 这 是 一 个 HITMLS 国 际 象棋 模拟 程序 ， 你 可 以 跟 计 算 机 对 弈 ( 上方 选 手 )， 可 
以 使 用 三 维 视角 , 取决 于 你 的 设置 。 要 挑战 自己 ? RE: http://htmlchess.sourceforge.net/ 


demo/example.html ; 
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--- 5 





ERE- 


使 用 CSS3 





书 这 一 部 分 的 标题 是 “制作 新 网 页 ”， 也 就 是 要 制作 有 别 于 过 去 的 “现代 ”网 页 。 而 制 

作 现 代 网 页 ， 如 果 不 使 用 CSS3， 几 乎 是 不 可 能 的 。 作 为 Web 标 准 ，CSS3 已 经 像 HTML 
一 样 ， 成 为 了 制作 网 页 或 开发 Web 应 用 不 可 或 缺 的 一 个 部 分 。 不 论 是 布局 页 面 、 构 建交 互 按钮 和 
菜单 ， 还 是 仅仅 美化 一 下 界面 ，CSS 都 是 最 基本 的 工具 。 事 实 上 ， 随 着 HTML 慢 慢 地 将 关注 点 转 
向 内 容 和 语义 (参见 2.1 节 )，CSS 已 经 成 为 Web 设 计 的 灵魂 所 在 。 

作为 Web 设 计 的 核心 语言 ，CSS 变 得 日 益 庞 大 和 复杂 。 到 了 CSS 2.1 的 时 候 ，CSS 规 范 扩展 为 
最 初 的 $ 倍 ， 几 乎 达到 中 篇 小 说 的 篇 幅 。 好 在 ，CSS 的 设计 者 们 对 这 个 标准 有 着 合理 的 长 远 规 划 。 
他 们 把 下 一 代 CSS 拆 分 为 一 组 独立 的 标准 ， 每 个 独立 的 标准 叫做 模块 。 这 样 一 来 ， 浏 览 右 开发 商 
就 可 以 自主 决定 先 实现 哪个 模块 ， 从 而 让 那些 令 人 向 往 的 部 分 尽早 得 到 应 用 。 而且, 浏览 需 开 发 
商 确实 也 是 这 么 做 的 ， 要 么 实现 某 个 模块 ， 要 么 不 实现 。 所 有 新 的 CSS 模 块 归 总 起 来 叫做 CSS3 
(注意 ， 跟 HTML5S 一 样 ， 字 母 与 数字 之 间 没 有 空格 )。 

CSS3 在 不 断 发 展 成 熟 的 过 程 中 出 现 大 约 50 个 模块 。 这 些 模块 涵盖 了 悦 人 眼目 的 功能 ( 比如 
丰富 的 字体 和 动画 )， 也 包括 更 具体 、 更 有 针对 性 的 内 容 ( 如 时 读 文本 和 根据 计算 机 或 移动 设备 
改变 样式 的 能 力 )。 总 之 ， 在 这 众多 的 模块 中 ， 有 些 已 经 得 到 当前 所 有 浏览 器 最 新 版 本 的 支持 ， 
而 有 些 则 只 是 尚未 得 到 任何 浏览 器 支持 的 试验 性 规范 。 

本 章 将 讨论 CSS3 最 重要 的 部 分 (也 是 被 文 持 得 最 好 的 部 分 )。 先 看 一 看 怎么 使 用 字体 让 页 面 
文本 更 加 活泼 ， 然 后 再 探讨 如 何 编写 样式 以 适应 不 同 大 小 的 浏览 句 窗 口 和 不 同 的 上 网 设备 〈 如 
iPad 和 iPhone )。 接 下 来 ,我们 会 看 看 怎么 使 用 阴影 、 圆 角 和 其 他 手段 把 方 框 变 得 更 漂亮 。 最 后 ， 
再 讨论 一 下 怎么 使 用 渐变 创建 精妙 的 效果 , 在 鼠标 悬 停 、 单 击 或 切换 控件 时 ， 给 出 优雅 的 视觉 提 
示 。( 结合 变换 和 透明 这 两 个 CSS3 功 能 可 以 把 上 述 效果 做 得 更 完美 。) 

不 过 ,在 着 手 尝试 这 些 激 动人 心 的 CSS3 功 能 之 前 ， 我 想 有 必要 先 考虑 下 ， 怎 样 才能 做 到 既 
为 网 页 应 用 拉 风 的 特效 ， 同 时 又 不 会 把 一 部 分 用 户 抛 在 滚滚 风尘 中 。 


























8.1 使 用 CSS3 


毋庸 置疑 , CSS3 是 Web 样 式 设计 的 未 来 , 但 它 还 没有 制定 完成 。 大 多 数 模 块 都 在 修订 和 评审 
当中 ,没有 一 秋 浏 览 融 文 持 全 部 模块 。 换 句 话 说 ，CSSS3 与 HIML5 一 样 ， 都 存在 兼容 性 问题 。 
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此 ,每 一 位 网 站 开发 者 都 要 目 己 决定 使 用 什么 , 不 使 用 什么 ,以 及 如 何 做 好 不 同 用 户 体 验 之 间 的 
衔接 工作 。 
在 打算 在 网 站 中 使 用 CSS3 之 前 ， 你 有 三 个 选择 。 下 面 我 就 一 一 分 析 给 你 听 。 


注意 CSS3 不 是 HTML5 的 一 个 部 分 。 这 两 个 标准 是 独立 的 ， 制定 它 们 是 两 批 人 ， 时 间 、 地 点 也 
都 不 一 样 。 然而， 即使 W3C 都 在 鼓励 开发 人 员 把 HTML5 和 CSS3 混 同 为 一 个 标准 , 希望 借 
此 推动 Web 的 新 一 波 发 展 浪潮 。 不 相信 ? 看 看 W3C 的 HIMLS 标 志 生 成 页 面 : 
http:/www.w3.org/htmlMlogo， 你 会 发 现 W3C 鼓 励 你 在 HIMLS 的 标志 中 宣传 CSS3 。 


8.1.1 选择 一 : 用 能 用 的 


如 果 某 个 功能 得 到 了 所 有 浏览 需 的 文 持 , 自然 就 可 以 放心 使 用 。Web 字 体 就 是 这 样 的 功能 ( 参 
见 8.2 市 ) 你 大 可 以 选择 合适 的 字体 ,这 些 字 体 甚 至 都 可 以 在 IE6 中 显示 。 可 惜 的 是 ， 这 样 的 CSS3 
功能 实在 是 少 之 又 少 。 另 外 ,单词 自动 折 行 (word-wrap 属 性 ) 也 能 在 所 有 浏览 器 中 使 用 ， 而 稍 
作 处 理 就 可 以 在 老 版 本 浏览 句 中 实现 透明 效果 。 可 是 , 除了 这 些 之 外 ， 几 乎 所 有 功能 对 现在 依然 
流行 的 了 上 7 和 IE8 而 言 都 是 不 兼容 的 。 














注意 ”除非 特意 说 明 ， 本章 所 有 CSS3 功 能 都 可 以 在 目前 最 新 版 本 的 浏览 器 中 使 用 ,包括 IE9, 但 
不 包括 其 他 老 版 本 的 下 。 


8.1.2 选择 二 : 将 CSS 功 能 作为 增强 


CSS3 粉 丝 们 异口同声 地 说 :“ 网 站 没有 必要 在 所 有 浏览 各 中 都 长 得 一 模 一 样 。 当然 没 错 。 
( 他们 还 为 此 建 了 一 个 网 站 呢 : http://DoWebsitesNeedToBeExperiencedExactlyTheSameInEvery 
Browser.com/。 ) 

这 个 选择 的 中 心思 想 ， 就 是 利用 CSS3 来 添加 疤 饰 ， 即 使 用 户 的 浏览 套 不 文 持 也 无 伤 大 雅 。 
比如 说 border-radius 属 性 吧 ， 可 以 用 它 生 成 浮动 的 圆 角 框 : 











header { 
background-color: #7695FE; 
border: thin #336699 solid; 
padding: 10px; 
margin: 10px; 
text-align: center; 
border-radius: 25px; 
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x Tiborder-radius/g PE BS] V, EE EL TZ 2s ALS TÉ s SCA D] AASA ESCAS BH, MAR 
呈现 方 角 框 (图 8-1 )。 


图 8-1 ， 在 IE9 中 ， 标 题 框 有 

How the World Could End fs ( 上 ) 。IE8 则 会 忽略 
border-radius 属 性 ， 只 应 用 
其 他 的 样式 声明 ( 下) 


How the World Could End 





是 不 是 很 有 吸引 力 ? 既然 可 以 这 样 , 那 谁 不 想 尝 试 一 下 最 新 的 功能 呢 。 不 过 ， 如 末 你 在 这 条 
路 上 走 得 太 远 钨 怕 还 是 有 问题 。 一 个 网 站 ,不管 它 在 最 新 版 本 的 浏览 带 中 看 起 来 有 多 好 ， 只 要 有 
一 部 分 用 户 在 用 旧 浏 顺带 ,而 且 在 他 们 的 浏 唤 带 中 看 不 出 你 的 网 站 有 什么 特别 , 那 你 的 投入 产 出 
就 要 大 打折 扣 。 毕 苋 , 谁 部 希望 目 己 的 网 站 能 吸引 所 有 人 , 而 不 只 是 那些 拥有 最 新 浏览 瘟 的 极 客 。 

考虑 到 这 一 点 ， 在 使 用 某 些 CSS3 功 能 增强 网 页 时 ， 不 得 不 多 加 小 心 。 换 名 话说 ， 应 该 只 使 
用 那些 已 经 得 到 较 多 浏览 絮 支 持 的 功能 ( 至 少 IE10 会 支持 ) 不 要 让 自己 的 网 站 在 不 同 浏览 器 中 
的 体验 差别 过 大 ， 以 免 强 迫 部 分 用 户 受 到 “ 低 一 等 ”的 待遇 。 





提示 一 说 到 CSS3，IE 总 是 那个 “掉队 ”的 家 伙 。 少 数 激进 的 Web 设 计 师 甚至 主张 应 该 把 IE 
“ 打 入 冷 官 ?， 只 要 其 他 浏览 器 支持 茶 个 CSS3 功 能 ， 就 可 以 使 用 ,而 不 必 考 虑 于 。 否 则 ， 
又 有 谁 能 给 微软 施 压 ， 让 Web 发 展 得 越 来 越 好 呢 ? 这 样 做 没有 问题 ， 但 仅 限 于 你 的 网 站 
本 身 致 力 于 推广 先进 的 Web 标 准 。 如 果 不 是 的 话 ， 那 么 拒绝 一 大 部 分 用 户 的 结果 只 能 适 


得 其 反 。 道 理 很 简单 ， 你 可 以 不 喜欢 别人 的 浏览 器 ， 但 别人 却 会 用 自己 的 浏览 器 来 浏览 
你 的 工作 成 果 。 


一 


8.1.3 选择 三 : Modernizr 

如 果 你 使 用 了 某 个 未 得 到 全 面 文 持 的 CSS3 功 能 ， 同 时 不 文 持 该 功能 的 浏览 需 也 能 给 出 不 错 
的 呈现 效果 ， 那 当然 再 好 不 过 了 。 可 是 ， 有 了 时候 这 样 做 会 导致 网 站 中 某 个 关键 的 区 块 消失 不 见 ， 
或 者 其 降级 的 版 本 看 起 来 丑陋 不 堪 。 比 如 ， 图 8-2 展 示 了 只 有 Firefox 支 持 的 多 色 边 框 。 
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EUM : 图 8-2: 在 Firefox 中 , 多 色 边 框 看 起 
Dig this multicolored border on Firefox. Kp 
来 黄 心 悦目 (E) 。 但 在 Chrome 


中 , 我 们 只 能 看 到 傻 粗 傻 粗 的 纯 黑 


色 边框 (下 ) ， 这 怎么 说 也 不 能 叫 
好 看 


But it's not so nice on Chrome. 








IPARRERA, ABHRA EGBSEPIEYE S8 JUS HEP TE PS HRR. Ma, Wesa H3 
容 性 最 好 的 属性 ， 然 后 再 列 出 新 属性 ， 以 覆盖 之 前 的 属性 。 这 种 方式 如 果 有 效 ， 那 么 就 可 以 适应 
所 有 训 览 项。 因为 老 版 本 训 览 融会 采用 标准 的 属性 ， 而 新 浏览 春 则 会 用 新 属性 罗兰 标准 的 属性 。 
2E PITE, a AAH S TETE si CN SCBUTBWLAE TE TE SCELTE OS : 


.StylishBox { 








background: yellow; 
background: radial-gradient(ellipse, red, yellow); 


) 
图 8-3 展 示 了 结 


图 8-3: b. 在 不 支持 CSS3 的 浏览 器 中 ， 这 个 类 名 
为 stylisBox 的 元 素 只 有 黄色 背景 。 下 :在 支持 CSS3 
的 浏览 器 中 ,黄色 背景 会 被 由 红 到 黄 的 放射 性 渐变 
取代 。 ( 至 少 这 就 是 我 们 想 要 的 。 像 这 个 例子 这 样 
写 暂 时 还 不 行 ， 因 为 放射 性 渐变 标准 还 在 修订 之 
Fo 要 看 到 这 里 的 效果 , 需要 使 用 带 开发 商 前 缀 的 
BIE, 58.1.47 ) 








在 某 些 情况 下 ， 禾 其 样 式 属性 也 不 能 奏效 ， 因 为 需要 以 组 合 的 方式 来 设置 属性 。 图 8-2 所 示 
的 多 色 边 框 就 是 一 个 例子 。 设 置 这 个 多 色 效 果 要 使 用 border-colors 属 性 ， 但 看 起 来 就 好 像 是 只 
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order thickness 属 性 把 边框 加 粗 了 一 样 。 在 不 文 持 多 色 边 框 的 浏 览 需 中 ， 那 个 傻 粗 傻 粗 的 
边框 怎么 看 怎么 难看 ， 不 管 它 是 什么 颜色 。 
要 解决 这 个 问题 ， 可 以 使 用 Modernizr， 也 就 是 1.6.3 节 介绍 的 那个 用 于 测试 HTML5 功 能 支持 
的 JavaScript 库 。 使 用 Modernizr 可 以 为 不 文 持 某 个 样式 属性 的 浏览 需 设 置 替 代 的 样式 。 例 如 ， 假 
设 要 创建 图 8-1 所 示 的 两 种 标题 框 。 在 支持 的 浏览 右 中 ， 你 想 要 圆 角 边框 ， 而 在 不 支持 的 浏览 3 
中 ， 你 想 使 用 双 线 边框 。 此 时 ， 如 果 你 在 页 面 中 引用 了 Modernizr 脚 本， 那么 可 以 像 下 面 这 样 写 
出 组 合 的 样式 规则 : 


/* 为 所 有 标题 设置 样式 ， 无 论 浏览 器 是 否 支 持 CSS53*/ 
header { 

background-color: #7695FE; 

padding: 10px; 

margin: 10px; 

text-align: center; 


j 


/* 为 支持 border-radius 属 性 的 浏览 器 设置 样式 */ 
.borderradius header { 
border: thin #336699 solid; 
border-radius: 25px; 


} 


/* 为 不 支持 border-radius 属 性 的 浏览 器 设置 样式 */ 
.ho-borderradius header { 
border: 5px #336699 double; 











这 个 办 法 不 错 啊 ， 那 两 个 类 是 什么 意思 呢 ? 在 页 面 中 使 用 Modernizr 时 ， 需 要 给 页 面 的 根 元 
素 <htm1> 添 加 class="no-js" 属 性 : 

«html class-"no-js"» 

然而 ， 在 页 面 加 载 完 Modernizr 后 ， 它 会 迅速 检测 一 批 HIML5 、JavaScript 和 CSS3 功 能 的 文 
持 情 况 。 然 后 ， 为 htm1> 元 素 应 用 一 大 堆 类 ， 每 个 类 名 用 空格 隔 开 ， 把 其 class 属 性 修改 成 如 下 
所 示 : 


«html class-"js flexbox canvas canvastext webgl no-touch geolocation 
postmessage no-websqldatabase indexeddb hashchange history draganddrop 
no-websockets rgba hsla multiplebgs backgroundsize borderimage borderradius 
boxshadow textshadow opacity no-cssanimations csscolumns cssgradients 
no-cssreflections csstransforms no-csstransforms3d csstransitions fontface 
generatedcontent video audio localstorage sessionstorage webworkers 
applicationcache svg inlinesvg smil svgclippaths"» 


如 条 这 里 列 出 的 类 名 中 包含 某 个 功能 ,说明 浏览 希 文 持 该 功能 。 如 采 表 示 相 应 功能 的 类 名 前 
缀 为 “no-”， 那 说 明 浏 览 喜 不 文 持 该 功能 。 以 上 面 的 代码 为 例 ， 说 明 浏览 融 文 持 JavaScript (js )， 
但 不 支持 Web 套 接 字 ( no-websockets )。 至 于 CSS3 i HHN Vi ss x tF border-radius 属性 
( borderradius )， 但 不 文 持 CSS3 倒 影 ( no-cssreflections ). 

在 目 己 的 选择 符 中 使 用 这 些 类 名 ,就 可 以 基于 浏览 器 的 支持 情况 分 别 设置 样式 。 比 如 , 使 用 
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Yt TET .borderradius header 能 够 取得 所 有 包含 在 这 个 <htm1> 元 素 中 的 <header> 元 系 一 一 当然 , 浏 
览 器 必须 得 支持 border-radius 属 性 。 要 不 然 ， 就 不 会 出 现 .borderradius 类 ， 而 这 个 选择 符 也 就 
不 会 选择 任何 元 素 ， 对 应 的 规则 也 会 被 忽略 。 
使 用 Modernizr 也 有 一 个 问题 ， 那 就 是 它 只 会 检测 一 部 分 CSS3 功 能 。 这 部 分 功能 都 是 最 流行 
也 最 成 熟 的 CSS3 功 能 ， 其 中 并 不 包括 图 8-2 所 示 的 多 色 边 框 ， 因 为 相应 的 属性 还 只 有 Firefox 目 己 
支持 。 为 此 ， 最 好 还 是 不 要 在 自己 的 网 页 中 使 用 多 色 边 框 ， 至 少 现在 不 行 。 














注意 ”利用 Modernizr 也 可 以 编写 作为 后 备 (向 后 兼容 ) 的 JavaScript 脚 本 。 编 写 脚 本 时 ， 只 要 像 
检测 HTML5 功 能 一 样 ， 检 测 Modernizr 对 象 中 的 特定 属性 即 可 。 在 浏览 器 不 支持 的 高 级 
CSS3 功 能 太 多 (比如 不 支持 渐变 和 动画 ) 的 情况 下 ， 也 可 以 用 编写 脚本 的 方式 来 弥补 
不 过 ， 这 样 一 来 工作 量 可 就 大 了 ， 而 且 实现 方式 也 完全 不 同 。 所 以 对 于 一 些 必 不 可 少 的 
网 站 功能 ， 最 好 只 通过 JavaScript 来 实现 。 


8.1.4 ”特定 于 浏览 器 的 样式 


制定 CSS 标 准 的 人 在 引入 新 功能 时 ,经营 会 遭遇 “ 重 和 鸡 ” 的 困 局 。 为 了 让 一 项 功能 到 于 完 
美 ， 他 们 需要 听 到 浏览 厚 开 发 商 和 Web 设 计 人 员 的 反馈 。 但 是 ， 为 了 得 到 这 些 反 饥 ， 必 须 先 让 浏 
览 需 开 发 页 和 Web 设 计 人 员 实 现 还 不 够 完美 的 功能 。 这 样 就 会 形成 一 个 试验 和 反馈 循环 ， 经 过 反 
复 多 次 修订 ,最终 定案 。 在 此 期 间 ， 无论 是 功能 的 语法 还 是 实现 ， 都 会 发 生变 化 。 于 是 不 可 避免 
地 会 导致 非常 现实 的 风险 : 某 些 Web 设 计 人 员 会 学 习 这 些 新 功能 ， 然 后 将 其 用 在 自己 的 网 站 中 ， 
而 将 来 标准 万 一 有 变化 ， 就 可 能 导致 网 站 无 法 使 用 。 
为 了 避免 这 种 风险 ， 浏 览 郁 开发 商 使 用 了 一 种 叫做 开发 商 前 组 ( vendor prefix ) 的 办 法 ， 即 
为 还 在 开发 中 的 CSS 属 PERI 能 加 上 特定 浏览 硕 实现 的 前 绥 。 比 如 8.5 节 将 要 介绍 的 还 在 开发 过 程 
中 的 radial-gradient 属 性 。 如 果 想 在 Firefox 中 使 用 它 ， 需 要 使 用 的 属性 名 为 -moz-radial- 
gradient。 这 个 属性 名 中 的 -moz-( 开发 Firefox 的 组 织 一 一 Mozilla 的 简写 ) 就 是 “开发 商 前 级 ”。 
每 个 浏览 茵 引擎 痢 有 上 自己 的 开发 商 前 级 C 见 表 8-1 )。 en te en, 但 
这 样 还 是 有 其 合理 性 的 。 首 先 , 不 同 浏 览 妖 开发 两 不 会 同时 文 持 某 项 功能 ,而 且 经 常会 实现 同一 
规范 的 不 同 版 本 。 其 次 ,尽管 大 家 将 来 都 要 文 持 最 终 规 范 规 定 的 同样 的 语法 ， renibus 
属性 和 功能 则 不 一 定 相同 。 






































表 8-1 开发 商 前 组 


前 — X 浏览 器 

-Mmoz- Firefox 

-webkit- Chrome 和 Safari (它们 的 引擎 都 是 WebKift) 
-ms- Internet Explorer 

-0- Opera 


208 | 第 8 章 使 用 CS53 





好 了 ， 假 如 今天 你 想 使 用 放射 性 渐变 ， 而 且 想 让 浏览 硕 都 文 持 该 效果 〈 包括 将 来 的 IE10 ), 
那么 就 要 使 用 下 面 这 条 “浮肿 ”的 CSS 规 则 : 


.StylishBox { 
background: yellow; 
background-image: -moz-radial-gradient(circle, green, yellow); 
background-image: -webkit-radial-gradient(circle, green, yellow); 
background-image: -o-radial-gradient(circle, green, yellow); 
background-image: -ms-radial-gradient(circle, green, yellow); 


Jj 

在 这 个 例子 中 ， 每 条 对 放射 性 渐变 的 声明 都 使 用 了 相同 的 语法 。 这 表明 标准 已 经 尘埃 落 定 ， 
而 浏览 需 开 发 商 很 快 就 会 删 掉 属性 名 中 的 前 缀 ,直接 文 持 radial-gradient 必 性 (就 像 它 们 当前 文 
持 corner-radius 属 性 一 样 )。 不 过 ， 这 个 属性 的 语法 是 最 近 才 统一 起 来 的 ， 旧 版 本 Chrome 使 用 的 
渐变 语法 与 这 里 完全 不 一 样 。 








说 明 使 用 开发 商 前 组 的 确 是 够 乱 的 。Web 开 发 人 员 也 因此 分 成 两 个 阵营 ， 一 个 阵营 认为 要 想 
用 上 最 新 最 酷 的 功能 ， 这 是 无 论 如 何 也 无 法 避免 的 。 另 一 个 阵营 则 认为 ， 那 么 多 浏览 器 
前 级 只 会 让 头脑 清楚 的 开发 人 员 对 这 些 功 能 效 而 远 之 。 但 有 一 条 是 肯定 的 : 如 果 不 使 用 
开发 商 前 级 ， 相 当 一 部 分 CSS3 功 能 都 将 无 法 使 用 。 


8.2 Web 排版 


在 CSS3 所 有 时 找 的 新 功能 中 ， 很 难说 哪个 最 好 。 但 是 ， 假 如 非 要 找 出 那么 一 个 功能 ， 一 个 
现在 就 能 用 ， 而 且 能 够 令 人 浮想 联翩 的 功能 ， 我 想 就 要 数 Web 字 体 了 。 

以 前 ，Web 设 计 人 员 只 能 使 用 少数 几 种 安全 字体 。 所 谓 安全 字体 ， 就 是 已 知 的 所 有 浏览 器 和 
操作 系统 都 支持 的 字体 。 然 而 ,任何 一 位 有 点 经 验 的 设计 师 都 知道 ,字体 在 营造 文档 氛围 的 过 程 
中 ， 具 有 不 可 符 代 的 重要 作用 。 选 择 一 款 合 适 的 字体 ， 原 本 冷冰冰 的 学 术 说 教 ， 瞬 间 就 会 让 人 归 
思 无 限 ， 而 从 古典 守旧 到 未 来 主义 同样 也 只 有 一 步 之 于。 











注意 为 什么 浏览 器 不 急于 实现 自 定 义 Web 字 体 ? 首先 ， 有 一 个 优化 的 问题 。 由 于 计算 机 显示 
器 的 分 辨 率 远 远 赶不上 印刷 的 精度 ， 所 以 如 果 Web 字 体 设置 不 当 ， 显 示 器 在 显示 小 号 字 
体 时 就 会 模糊 一 团 。 其 次 ， 大 多 数字 体 并 非 免 费 。 微 软 等 大 公司 显然 不 愿意 鼓励 Web 开 
发 人 员 在 未 经 允许 的 情况 下 ， 就 把 自己 电脑 里 的 字体 上 传 到 网 站 上 ， 这 可 以 理解 。 下 一 
节 我 们 蕊 上 会 介绍 到 ， 字 体 公 司 对 这 两 个 问题 都 给 出 了 解决 方案 。 


CSS3 通 过 6@font-face 为 浏览 器 增加 了 强大 的 字体 功能 。 使 用 这 个 功能 的 步骤 如 下 : 
(D 把 字体 上 传 到 网 站 (或 者 为 了 支持 不 同 的 浏 览 器 ， 上 传 该 字体 的 多 个 不 同 版 本 ); 
(2) 使 用 @font-face 命 令 注 册 每 一 个 想 要 在 样式 表 中 使 用 的 字体 ; 
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(3) 在 样式 表 中 使 用 注册 过 的 字体 ， 就 像 使 用 Web 安 全 字体 一 样 使 用 字体 名 字 : 

(4) 浏览 器 在 遇 到 使 用 Web 字 体 的 样式 表 时 ， 就 会 把 字体 下 载 到 页 面 和 图 片 的 临时 缓存 中 。 
然后 就 在 你 的 网 页 或 网 站 中 使 用 该 字体 ( 如 图 8-4 所 示 )。 如 果 其 他 网 页 也 要 使 用 相同 的 字体 ， 由 

要 分 别 注册 并 提供 自己 的 字体 文件 。 











Zero & Zero Is Impact Label Reversed Regular 图 8-4. 修改 后 的 启示 录 
| 页面 使 用 了 4 种 新 字体 。 
‘| Apocalypse Now Map 这 些 字 体 都 是 免费 PB, 


CQ QOfile///C/HTMLS/Chapter?62008/FontTest/ApocalypsePage. Revised.html $4 412824 A A 





Font Squirrel EX fS 
字体 





SCENARIOS THAT SPELL THE END OF LIFE AS WE KNOW IT 


RIGHT NOW, you're probably feeling pretty good. After all, life inthe developed 
world is comfortable-probably more comfortable than it's been forthe average 
human being throughoutall of recorded history. 


Butdon't gettoo smug. There's still plenty of 
horrific ways it could allfall apart. Inthis article, 
you'Illlearn about a few of ourfavorites. 








DOOMSOAY 


Skeptics suggestthatthe Mayancalendarsimply 
rolls to a new 5,126-yeareraafter2012,and 
doesn'tactually predicta life- ending 
apocalypse. But giventhatthe long-dead 
Mayans were wrong about virtually everything 
else, whu should wetrustthem onthis? 


Wiji you be the/ast person standing 
ifone of these apocalyptic 
scenarios plays out? 


Not quite as frightening as a Vampire Takeover or Living- Dead Takeover, a robot 
rebellionis still a disquieting thought. We are already outnumbered by our 
technological gadgets, and even Bill Gates fears the day his Japanese robot slave 
turns him overbu the ankles and asks (ina suitably robotic voice) "Who's your 
daddı nnw?" 











Impact Label Regular 
Metrophobia 





注意 ”严格 来 讲 ，@font-face 不 是 新 功能 。CSS 2 当时 就 定义 了 这 个 命令 ， 但 由 于 浏览 器 开发 商 
意见 不 统一 ，CSS 2.1 又 把 它 给 删除 了 。 现在，CSS3 又 开始 致力 于 把 @font-face 打 造成 一 
普 适 的 标准 。 


接 下 来 几 小 慷 分 别 讨论 上 述 几 个 步 又 。 
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8.2.1 ”Web 字体 格式 


尽管 目前 所 有 浏览 融 都 文 持 @font-face， 但 它们 支持 的 字体 文件 格式 却 不 一 样 。Internet 
Explorer 已 经 文 持 6font-face 很 多 年 了 ， 但 它 只 文 持 一 种 字体 文件 格式 EOT ( Embedded 
OpenType )。 这 种 格式 有 很 多 长 处 ， 比 如 它 文 持 通 过 压缩 减少 字体 文件 大 小 ， 也 文 持 严 格 的 网 站 
许可 ， 从 而 不 会 被 其 他 网 站 盗用 。 可 是 ，.eot 格 式 一 下 没 有 发 展 起 来 ， 除 了 正之 外 ， 其 他 浏览 种 
都 不 文 持 它 。 直 至 最 近 ， 其 他 浏览 希 都 还 是 文 持 桌面 应 用 中 第 见 的 字体 格式 ， 即 TITF ( TrueType) 
和 OTF ( OpenType PostScript )。 而 除了 上 述 几 种 格式 外 ,还 有 另外 两 种 字体 格式 : SVG 和 WOFF。 
表 8-2 列 出 了 所 有 这 些 字 体格 式 。 





表 8-2 ” 散 入 字体 格式 


格 式 说 BH BU 5» 器 

TTF(TureType), OTF(OpenType ”桌面 应 用 中 常用 的 字体 格式 Firefox (3.6 版 之 前 ) 、Chrome 

PostScript) (6 版 之 前 ) 、Safari 和 Opera 

EOT (Embedded OpenType) MAKEA BUE. BR TIEA BUB) Sd zs cT Internet Explorer (IE9 之 前 ) 

SVG (Scalable Vector Graphics) 一 种 用 于 字体 的 多 功能 图 形 格式 ,效果 并 不 是 太 Safari Mobile (iOS 4.2 之 前 版 本 
好 (显示 速度 慢 ， 而 且 文 本 质量 不 高 ) 的 了 Phone 和 iPad) 和 使 用 Android 


操作 系统 的 移动 设备 
WOFF (Web Open Font Format) ”可 能 是 唯一 一 个 面向 未 来 的 字体 格式 ,比较 新 的 ”IE9、Firefox 3.6 和 Chrome 6 及 更 
WIE as LIFE 高 版 本 支持 它 
WÈ: 要 想 让 所 有 浏览 带 都 支持 你 的 字体 ， 必 须 将 同一 字体 制作 成 多 种 格式 。 最 低 限度 ,也 
要 把 字体 制作 成 TTF 或 OTF 格 式 ( 具体 哪 种 格式 无 所 谓 )、EOT 格 式 和 SVG 格 式 。 当然, 最 好 也 (但 
不 是 必须 ) 文 持 WOFF 格 式 ， 因 为 这 种 格式 将 来 很 可 能 得 到 广泛 文 持 。( WOFF 格 式 也 文 持 压缩 ， 
因此 可 以 缩短 下 载 时 间 。) 


iB ERE SS 
即使 你 规 规矩 矩 地 提供 了 必要 的 字体 格式 ,仍然 免 不 了 会 遭遇 一 些 异常 情况 。 下 面 给 出 了 
在 使 用 Web 字 体 时 偶尔 会 出 现 的 问题 。 
口 很 多 字体 在 依然 有 很 多 用 户 的 Windows XP 中 看 起 来 并 不 舒服 ， 因 为 Windows XP 通常 会 
禁用 反 锯齿 功能 。( 没有 打开 反 锯 此 功能 时 的 字体 看 起 来 像 是 “年 毛 鸡 ”。) 
口 有 人 反映 某 些 浏览 器 (或 操作 系统 ) 在 显示 某 些 上 诅 入 字体 时 有 问题 。 
口 在 有 些 浏览 器 中 会 出 现 所 谓 的 FOUT ( 即 Flash of Unstyled Text ) 问题 。 在 需要 几 秒 钟 下 
载 某 种 说 入 字体 的 情况 下 , 页 面 会 首先 使 用 备用 字体 呈现 文本 , 然后 再 使 用 嵌入 字体 重 
新 演 染 。 老 版 本 的 Firefox 中 最 常见 这 个 问题 ,如 果 这 对 你 而 言 已 经 成 了 必须 解决 的 问题 ， 
可 以 使 用 Google 提 供 的 一 个 JavaScript 库 ( http://code.google.com/apis/webfonts/docs/web- 
font loader.html )， 利 用 它 可 以 自 定义 未 加 载 完 成 时 使 用 的 样式 ， 完 全 控制 演 染 过 程 。 
虽然 在 使 用 Web 字 体 时 偶尔 会 遇 到 这 些小 问题 , 但 新 版 本 的 浏览 器 已 经 逐步 把 它们 都 解决 
了 。 比如 , Firefox 为 了 消除 FOUT 问 题 , 会 在 使 用 备用 字体 之 前 , 先 等 待 3 秒 钟 以 下 载 误 入 字体 。 
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8.2.2 ”使 用 字体 包 


此 时 此 刻 , 有 读者 可 能 会 问 : 我 到 哪里 去 找 那 么 多 字体 文件 呢 ?” 最 简单 的 办 法 就 是 从 网 上 下 
载 现成 的 字体 包 。 字 体 包 里 有 你 需要 的 所 有 字体 文件 .但 从 网 上 找 的 问题 是 只 能 找到 什么 用 什么 。 
下 面向 大 家 推荐 一 个 下 载 字 体 的 网 站 : Font Squirrel , 从 中 可 以 看 到 精 选 出 来 的 各 种 字体 : 
http://www.fontsquirrel.com/fontface ( 图 8-5 )。 














图 8-5: Font Squirrel 提 供 
l) Font Squirrel | Download Hundreds of Free @font-face Fonts - Mozilla Firefox 了 几 自 种 高 质量 的 字 
ile Edit View History Bookmarks Tools Help 体 ， 并 加 以 分 门 别 类 ， 

六》 C ÓN P http//www.fontsquirrel.com/fontface 3 如 Calligraphic ( 书法 
fj» Font Squirrel | Download Hundreds o... | -+ 4k ). Grunge( 非 主 流 )、 
miel ftev nt Retro ( 复古 ) 等 等 。 

Zenda Ha BEEM RAENT, REPA 
完全 免费 ， 而 且 可 以 在 
Calligraphic 任何 地 方 使 用 ， 包 括 自 
Chantelli liiin ua 11 1 Font Flora Pus ura | 2 Fonts Gondola um Fonts. 己 的 电脑 和 ARE, 选 
Sr eet m Lou nero 中 一 款 字体 后 ， 单 击 
Chantelli Antius Florante af L Gondola SD AaBb View Font ( 查看 字体 ) ， 
可 以 看 到 每 一 个 字母 的 
Gothic | - orl1 1 Font - Kells mum Font — — iie ie Camarapisoa | 2m 4 模 KE ; Bá n view @ff 
Gothic Ultra OT Aa — Kclls sb abcbcF Kingthings Calligraphica Demo ( 查看 @font-face 
示例 ) ， 可 以 看 到 基于 


AA 
rg co 1 Font Pide oan d 1 Font pe — à 1 Font Qfont-face Hp A 的 po] Du 
t| Ge | a 


2 | Get Kit | 5 | Get Kit EN 

Kingthings Exctor Aa "Is CL Xo sum Kingthings founda 显示 效果 ; 而 单 击 Get 

-— — Kit 则 可 以 把 字体 直接 下 
载 到 你 的 计算 机 中 


查看 和 下 载 字体 的 链接 





下 载 完 字体 包 之 后 ， 得 到 的 是 一 个 包含 很 多 文件 的 压缩 文件 。 例 如 ， 下 载 在 网 8-5 中 看 到 的 
Chantelli Antiqua 字 体 后 ， 经 过 解压 缩 可 以 得 到 如 下 文件 : 


Bernd Montag License.txt 
Chantelli Antiqua-webfont.eot 
Chantelli Antiqua-webfont.svg 
Chantelli Antiqua-webfont.ttf 
Chantelli Antiqua-webfont.woff 
demo.html 

stylesheet.css 
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其 中 的 文本 文件 ( Bernd Montag License.txt ) 包含 授权 许可 信息 ， 大 意 是 你 可 以 免费 使 用 ， 
但 不 能 销售 该 字体 。 而 4 个 Chantelli Antiqua-webfont 文 件 就 是 4 种 不 同 的 文件 格式 。( 根据 选择 的 
字体 不 同 ， 还 可 能 包含 针对 不 同 字 形 ， 比 如 粗 体 、 和 斜体 和 纯 黑 体 等 的 文件 。) 最 后 ，stylesheet.css 
中 包含 着 将 该 字体 应 用 到 网 页 的 样式 表 规 则 ， 而 demo.html 则 是 一 个 显示 该 字体 的 示例 页 面 。 

要 使 用 Chantelli Antiqua 字 体 , 首先 要 把 所 有 Chantelli Antiqua-webfont 文 件 复制 到 网 页 所 在 的 
文件 夹 中 。 然 后 ， 就 是 注册 该 字体 ， 以 便 在 样式 表 使 用 它 。 为 此 ， 需 要 在 样式 表 的 开头 写 一 个 复 
琳 的 @font-face 规 则 ， 如 下 所 示 ( 带 看 行 写 便 于 下 文 说 明 ): 

1  Qfont-face { 
font-family: 'ChantelliAntiquaRegular'; 
src: url('Chantelli Antiqua-webfont.eot'); 
src: local('Chantelli Antiqua'), 

url('Chantelli Antiqua-webfont.woff') format('woff'), 


url('Chantelli Antiqua-webfont.ttf') format('truetype'), 
url('Chantelli Antiqua-webfont.svg') format('svg'); 























Co ~ Ou A uU hM 


} 
为 理解 这 条 规则 都 做 了 什么 ， 下 面 我 们 逐 行 解释 。 
O 第 1 行 : efont-face 是 正式 注册 字体 的 工具 ， 注 册 之 后 才能 在 样式 表 的 其 他 地 方 使 用 该 





字体 。 
a 第 2 行 : 给 这 区 字体 起 个 名 字 ， 有 具体 叫 什么 取决 于 你 ; 这 个 名 字 就 是 将 来 使 用 该 字体 时 要 
使 用 的 名 字 。 


O 第 3 行 : 必须 首先 注册 EOT 格 式 的 字体 文件 ， 这 样 正 不 理解 其 他 规则 也 没有 关系 ， 只 要 和 忽 
略 其 他 格式 就 行 了 。 这 里 的 ur1() 函 数 用 于 告诉 浏览 右 在 当前 位 置 下 载 为 一 个 文件 。 如 果 
把 字体 放 在 了 网 页 所 在 的 文件 夹 中 ， 那 么 在 此 只 要 给 出 字体 文件 名 即 可 。 

O 第 4 行 : BE Poo RE] local() PAZ, 这 个 函数 告诉 浏览 絮 这 种 字体 的 名 字 ， 如果 恰好 访 
客 的 电脑 中 安装 了 这 种 字体 ， 浏 览 妖 就 会 使 用 它 。 不 过 ,个 别 情况 下 这 个 函数 也 会 导致 
问题 ( 比如 ， 在 Mac OS X 中 ， 根 据 访客 字体 的 安装 位 置 不 同 ， 可 能 显示 一 个 安全 对 话 框 ; 
另外 ， 也 可 能 会 加 载 另 一 个 只 是 同名 的 字体 。) 为 此 ，Web 设 计 人 员 有 时 候 会 在 此 传人 一 
个 明显 频 编 的 字体 名 ， 让 浏览 絮 在 本 地 找 不 到 该 字体 。 比 如 ， 有 人 会 使 用 一 个 没有 意义 
的 笑脸 符号 ， 如 loca('@ ')。 

O 第 5 行 一 第 7 行 : 最 后 一 步 是 告诉 浏览 器 可 以 使 用 的 其 他 文件 格式 。 如 果 字 体 包 里 有 WOFF 
字体 文件 ， 建 议 把 它 放 在 第 一 位 ， 因 为 这 种 格式 的 字体 质量 最 高 。 然 后 ， 再 注册 TTF 或 
OTF 文 件 ， 最 后 注册 SVG 文件 。 






































提示 当然， 你 完全 可 以 不 用 自己 动手 写 @font-face 规 则 (也 不 必 理 解 上 面 介 绍 的 所 有 技术 细 
节 )。 只 要 把 Web 字 体 包 中 包含 的 stylesheet.css 文 件 中 的 规则 复制 到 页 面 中 即 可 。 


使 用 efont-face 注 册 了 字体 之 后 ,就 可 以 在 样式 表 使 用 该 字体 了 。 这 时 , 只 要 使 用 font-family 
属性 ， 然 后 指定 之 前 用 @font-face 给 字体 起 的 名 字 ( 第 2 行 ) 即 可 。 下 面 是 一 个 例子 ， 删 除了 





8.2 Web 排 版 | 213 


Q@font-face 规 则 的 大 部 分 代码 : 


Qfont-face { 
font-family: 'ChantelliAntiquaRegular'; 


"n 


body 1 
font-family: 'ChantelliAntiquaRegular'; 


这 条 规则 为 整个 网 页 应 用 了 新 注册 的 字体 。 当 然 , 只 通过 元 系 或 类 名 来 缩小 应 用 字体 的 范围 
也 没有 问题 。 唯 一 要 注意 的 是 ， 必 须 在 使 用 字体 之 前 ， 先 使 用 efont-face 注 册 字 体 。 把 上 面 的 步 
又 改 成 完 使 用 后 注册 ， 将 导致 无 法 使 用 字体 。 








提示 ”除了 预先 打 好 包 的 字体 之 外 , Font Squirrel 还 提供 更 多 字体 ,查看 最 受 欢迎 字体 ( 单 击 Most 
Downloaded ) 和 最 新 字体 ( 单 击 Newly Added ) 页 面 ,可 以 找到 更 多 字体 。 在 这 些 页 面 中 ， 
可 以 找到 Web 字 体 包 以 及 其 他 免费 字体 文件 ， 这 些 字体 文件 可 能 没有 支持 文件 ， 也 可 能 
需要 从 其 他 站 点 下 载 。 使 用 8.2.4 节 介绍 的 Font Squirrel 的 字体 包 生 成 工具 ， 可 以 将 你 的 字 
体 转 换 成 其 他 格式 。 


在 本 地 计算 机 中 使 用 的 字体 

我 能 不 能 在 打印 文档 时 也 使 用 网 页 中 的 字体 ? 

如 果 你 在 自己 的 网 站 中 找到 并 使 用 了 一 款 非常 棒 的 字体 ， 也 可 以 在 本 地 计算 机 中 使 用 它 。 
例如 ， 可 以 用 这 种 字体 在 Illustrator 中 创建 一 个 logo。 或 者 ， 你 们 公司 想 把 它 用 在 广告 、 产 品 手 
册 或 财务 报告 中 ， 打 印 出 来 。 

目前 的 Windows 和 Mac 计 算 机 都 支持 TrueType ( .tf ) 和 OpenType (.ot£) 字体 。 我 们 下 载 到 
的 每 个 字体 包 中 ,通常 都 会 包含 其 中 一 种 格式 大 多 数 时 候 是 TrueTyep 格 式 。 要 在 Winddows 
中 安装 该 字体 ， 先 把 它 从 压缩 文件 中 解压 出 来 ， 然 后 在 字体 文件 上 单 击 右键 ， 选 择 安装 即 可 。 
( 可 以 一 次 选择 安装 多 个 字体 文件 。) 在 Mac 中 ,双击 字 体 文 件 打开 Font Book 工 具 ， 然 后 再 单 击 
Install Font (安装 字体 ) 按钮 。 





8.2.3 ”使 用 谷歌 的 Web 了 字体 


如 果 你 想 使 用 新 奇 的 字体 ， 而 又 不 想像 前 面 介 绍 的 那么 及 烦 ， 还 可 以 使 用 谷歌 提供 的 Web 字 
体 解 决 方案 。 这 个 项 目 名 叫 Google Web Fonts， 其 中 包含 很 多 可 以 自由 使 用 的 字体 。 使 用 Google 
Web Fonts， 不 必 担 心 字 体格 式 ， 因 为 谷歌 会 检测 浏览 需 并 自动 发 送 正确 的 字体 文件 。 

要 在 页 面 中 使 用 谷歌 的 Web 字 体 ， 大 致 要 遵循 下 列 步 又 。 

(1) 在 浏览 器 中 打开 http://www.google.com/webfonts。 
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谷歌 会 列 出 很 多 字体 来 (图 8-6 )。 


图 8-6: 谷歌 一 直 坚 持 不 
懈 地 扩充 这 个 字体 列表 。 
在 查找 字体 时 , 可 能 要 先 
选择 排序 方式 ,指定 筛选 
选项 ( 在 圆圈 位 置 ) 。 例 
mag | L See ni mye、 | 如 ,可 以 按照 字母 顺序 拓 
2 0 6 Preview Text: | Grumpy wizards maketo» ~ | Size: 由 | px SAting: ienang ig 序 ,或 者 把 最 受 欢迎 的 字 


Alphabet 


font families sus Date added Y 体 排 在 前 面 . 而 筛选 选项 


o Number of styles 

Search: Grumpy wizards make toxic brew fox th: arie 包括 只 显示 衬 线 ( serif )、 
非 讨 线 ( sans-serif ) 或 手 
写 (handwritten ) 字体 


* B Google Web Fonts 





e C © www.google.com/webforts&ChoosePlaceselect 


Google web fonts m Feedback or issues? Let us know! 


^ Filters: Rosario, 1 Style by Hector Gatti Quick-use — B) Pop out Add to Collection 


| | All categories 


usb mizania made UeisDreo far lo cni Qaem Gek 


Script: 

Latin Yellowtail, 1 Style by Astigmatic Quick-use g Pop out 
Styles: 

Show all ptyles Normal 400 


. 
mr n arc [I] 3H 


0 font families in your Collection 4 Uds Review 








(2) 在 页 面 顶部 ， 单 击 一 个 选项 卡 (Word. SentenceskParagraph) ， 选 择 预览 字体 的 方式 。 

如 果 你 想 找 一 敌 字 体 用 在 标题 上 ,那么 可 以 选择 Word 或 Sentence， 看 看 一 个 单词 或 一 行 字 的 
效果 。 如 果 你 想 找 一 款 正 文字 体 , 那么 就 该 选择 Paragraph， 体 验 一 下 整 段 文本 的 效果 。 无 论 选择 
哪 种 预览 方式 ， 都 可 以 自己 手工 输入 一 些 文本 ， 并 设置 实际 的 字体 大 小 。 

(3) 设 定 搜索 选项 。 

如 果 你 知道 上 自己 要 找 什 么 字体 , 可 以 在 搜索 框 中 输入 该 字体 的 名 字 。 和 否则 ， 就 要 不 断 滚动 页 
面 ， 多 花 点 时 间 。 为 了 节省 时 间 ， 最 好 先 选 择 一 种 排序 方式 ， 并 琴 加 一 些 唤 选 设置 ( 比如 ， 要 想 
只 显示 最 受 的 欢迎 的 粗 体 非 衬 线 字 体 ， 可 以 将 排序 方式 设 定 为 Popularity， 在 虽 选 设置 中 只 选择 
Sans-Serif， 而 在 Thickness 中 设置 较 粗 的 笔画 )。 图 8-6 展 示 了 设置 这 些 选 项 的 地 方 。 

(4) 找到 一 款 满意 的 字体 后 ， 单 击 Pop out. 

谷歌 会 弹出 一 个 新 窗口 ， 其 中 包含 该 字体 的 详细 说 明 及 每 个 字符 的 展示 。 

(5) 如 果 你 真 喜欢 该 字体 ， 单 击 Quick-use 取 得 使 用 它 的 信息 。 

然后 ， 谷 歌会 给 出 使 用 该 字体 的 代码 。 包 括 一 个 样式 表 链 接 〈 必须 放 到 你 的 网 页 中 ) 和 一 个 
使 用 该 字体 的 样式 规则 示例 。 
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(6) 把 样式 表 链 接 添加 到 网 页 中 。 
比如 ， 你 选择 了 Metrophobic 字 体 ， 那 么 应 该 把 谷歌 给 出 的 链接 放 在 <head> 部 分 中 


«link href-"http://fonts.googleapis.com/css?family-Metrophobic" 
rel-"stylesheet"» 


这 个 样式 表 用 于 注册 字体 ， 使 用 了 @font-face， 因 此 你 就 不 用 自己 注册 了 。 最 重要 的 是 , 合 
歌会 负责 提供 相应 的 字体 文件 ， 而 你 就 不 必 再 往日 己 的 网 站 中 上 传 任何 东西 了 。 





说 明 别 忘 了 把 谷歌 字体 样式 表 的 链接 放 到 其 他 样式 表 链 接 的 前 头 。 这 样 ， 其 他 样式 就 可 以 使 
用 谷歌 的 Web 字 体 。 


(7) 使 用 选择 的 字体 〈 指 定 字体 名 )。 
例如 ,要 在 标题 中 使 用 刚刚 注册 的 Metrophobic 字 体 , 同时 再 添加 几 个 后 备 ， 以 防 浏览 需 下 载 
字体 文件 失败 ， 可 以 像 下 面 这 样 写 样式 规则 : 


h1 { 
font-family: 'Metrophobic', arial, serif; 


} 








创建 字体 集合 

以 上 步骤 是 取得 字体 标记 的 最 简便 方式 。 不 过 , 通过 创建 字体 集合 , 还 可 以 选择 更 多 字体 。 

字体 集合 就 是 一 种 打包 注册 多 种 字体 的 方式 。 要 创建 字体 集合 ， 只 要 单 击 每 款 字 体 穷 边 的 
Add to Collection 按钮 即 可 。 每 添加 一 种 字体 ， 该 字体 名 就 会 出 现在 页 面 底部 的 蓝 色 背景 
> 

选择 完 所 有 字体 后 ， 单 击 页 面 底部 的 Use 按钮 ， 就 可 以 看 一 个 与 单 击 Quick-use 之 后 看 到 
的 类 似 的 页 面 ， 只 不 过 此 时 页 面 中 显示 的 是 支持 字体 集合 中 所 有 字体 的 样式 表 链 接 。 

创建 了 字体 集合 后 ， 还 可 以 使 用 页 面 右上 角 的 两 个 链接 。 单 击 Bookmark your Collection 
可 以 在 浏览 器 中 创建 一 个 书签 ， 以 便 将 来 对 字体 集合 进行 调整 。 单 击 Download your collection 
可 以 把 字体 下 载 到 本 地 计算 机 中 ， 随 后 可 以 安装 这 些 字 体 并 用 于 文档 打印 。 


8.24 使 用 目 己 的 字体 


对 字体 有 特殊 伍 好 的 人 往往 会 对 字体 百般 挑剔 。 可 能 你 就 喜欢 一 秋 特 定 的 字体 , 想 在 网 页 中 
使 用 它 ， 对 前 面 介 绍 的 庞大 的 免费 字体 库 都 不 屑 一 顾 。 没 问题 ， 要 在 网 页 中 使 用 任何 字体 都 很 简 
单 。 只 要 找 对 工具 ， 就 可 以 用 自己 已 有 的 TTF 或 OTF 字 体 文件 ， 创 建 出 其 他 必要 的 格式 (EOT, 
SVG 和 WOFF )。 

不 过 ， 在 选择 这 种 方式 之 前 ， 有 个 问题 需要 事先 明确 : 寻常 的 字体 不 一 定 人 免费 。 换 名 话说， 
从 你 自己 的 电脑 中 挑 一 款 字 体 出 来 用 到 网 站 上 , 不 一 定 合法 ;除非 你 已 经 得 到 了 某 款 字 体 的 授权 。 
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比如 , (ACCORD ACABO A OC ERTE AS BERIUM HEP GU BUR SESS Y, 因此 你 可 以 在 使 用 字 处 理 软 
件 制 作 简报 时 使 用 这 些 字 体 。 然 而 ， 把 这 些 字 体 上 传 到 你 的 服务 各 上， 然后 在 你 的 网 页 中 使 用 ， 
则 是 未 经 许可 的 行为 。 


提示 “如果 你 想 知道 是 否 可 以 在 网 站 上 免费 使 用 自己 喜欢 的 字体 ， 唯 一 的 办 法 就 是 联系 字体 公 
司 或 字体 发 明 人 。 字 体 发 明 人 可 能 会 根据 网 站 的 流量 来 计 费 ， 也 可 能 只 象征 性 地 收 一 点 
钱 ， 其 至 干脆 不 收费 一 一 只 要 你 满足 他 们 的 要 求 ( 比如 用 小 号 字体 标明 你 使 用 的 是 什么 
字体 ,或 者 你 的 网 站 是 非 商 业 性 的 ,不 打算 赚 大 钱 ), 与 字体 发 明 人 取得 联系 还 有 一 个 好 
处 ， 有 经 验 的 字体 制作 人 通常 能 够 提供 针对 特定 显示 用 途 的 优化 版 本 。 





在 得 到 使 用 字体 的 许可 后 ， 可 以 使 用 Font Squirrel ( 没 错 ， 还 是 那个 提供 免费 字体 包 的 网 站 ) 
提供 的 工具 来 转换 它 。 在 浏览 器 中 打开 http://wwwi.fontsquirrel.com/fontface/generator， 图 8-7 展 示 
了 转换 字体 的 三 个 步骤 。 





{Æ Font Squirrel | Create Your Own @font-face Kits - Windows Internet Explorer m 8-7. 首先 ， 单 击 Add 
QC ə |É http://www.fontsquirrel.com/fontface/generator as Fonts 链 接 , 把 本 地 计算 
y Favorites f. Font Squirrel | Create Your Own Gfont-face Kits fov dA v Pagev Safety» Tools v 机 中 的 字体 文 件 上 传 到 
网 站 上 。 然 后 , 勾 选 “Yes,， 


] ; | the fonts l'm uploading 
@fo nt-face Kit Generator 3 are legally eligible for web 
| J| embedding” ( 假设 你 已 


a E 经 根据 前 面 的 提醒 取得 
| 了 使 用 字体 的 许可 )。 最 
后 ， 单 击 Download Your 


P) BASIC © OPTIMAL © EXPERT... Kit 按 钮 

















Aharoni Bold TTF 243 glyphs 49 KB Aspect Ratio: 0.45 日 


Agreement [v] Yes, the fonts I'm uploading are legally eligible for web embedding. 
Font S el offers this service Jood faith. Please the EULA f r font 


Download Your Kit 


4 | " 











-一 | 
/fontface/generator/dow a @ Internet | Protected Mode: On 








Font Squirrel 生 成 的 字体 包 与 前 面 介绍 的 免费 字体 包 一 样 。 其 中 ， 甚 至 还 会 包含 一 个 带 有 
@font-face 命 令 的 样式 表 和 一 个 测试 网 页 。 
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提示 “还 有 什么 地 方 可 以 找到 免费 字体 ? 如 果 你 没有 找到 合适 的 字体 ， 可 以 看 看 http://webfonts. 
info, 在 这 个 网 站 上 可 以 找到 一 些 免费 字体 网 站 的 链接 ,还 有 一 些 专业 的 字体 工厂 ， 比 如 
传奇 性 的 Monotype 的 信息 。 尽 管 字体 的 定价 机 制 变 化 得 很 快 ， 但 大 多 数字 体 工厂 都 会 提 
供 一 些 免 费 字体 ， 而 付费 定 户 每 年 只 需 大 约 10 美 元 就 能 得 到 几 十 种 超 高 质量 的 字体 。 有 
些 字体 厂商 会 像 Google Web Fonts 项 目 一 样 以 在 线 方 式 提供 字体 ， 这 样 就 减少 了 上 传 字体 
94 JH o 


8.2/5 多 栏 文 本 


使 用 自 定 义 字 体 并 不 是 CSS3 在 文本 显示 方面 唯一 的 创新 。 多 栏 文本 也 是 CSS3 的 一 个 全 新 模 
块 ， 用 于 灵活 地 显示 长 篇 内 容 ， 提 高 可 读 性 。 

要 实现 多 栏 文本 ， 可 谓 易 如 反 掌 。 而 且 ， 有 两 种 方式 可 供 选 择 。 第 一 个 选择 是 使 用 
column-count 属 性 来 设置 想 要 的 栏 数 ， 比 如 : 


article { 
text-align: justify; 
column-count: 3; 


} 
在 本 书写 作 时 ,这 种 方式 只 适合 Opera。 如 果 想 在 Firefox、Chrome 和 Safari 中 都 实现 同样 的 效 
末 ， 那 就 需要 使 用 市 开发 商 前 绥 的 属性 ， 如 下 所 示 : 
article ( 
text-align: justify; 
-moz-column-count: 3; 


-webkit-column-count: 3; 
column-count: 3; 


) 

Internet Explorer 9 不 文 持 多 栏 文本 〈 正 10 倒是 有 可 能 文 持 )。 

这 种 创建 多 栏 的 方式 适合 固定 布局 。 如 果 网 页 区 域 会 随 着 浏览 需 窗 口 缩放 而 变化 , 那么 这 些 
栏 可 能 会 变 得 过 宽 , 让 人 们 无 法 阅读 。 此 时 , 最 好 的 方法 是 不 要 设置 栏 数 , 而 是 使 用 column-width 
Je Er RUE ti RE T4 Zea: 


article ( 
text-align: Justify; 
-moz-column-width: 10em; 
-webkit-column-width: 10em; 
column-width: 10em; 


l 
QURE. Maaa m aE, MAAE ( 参见 图 8-8 )。 
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our favorites. 


图 8-8: 在 窗口 很 窄 的 情况 下 (E), Firefox 
fme eon D ING 会 只 显示 一 栏 。 随 着 窗口 变 宽 ， 栏 数 也 会 相 


5,126-Uear era after 2012, and 

doesn't actually predict a 应 增 加 ( 下 ) 
life-ending apocalypse. But given 

that the long-dead Mayans were 

wrong about virtually everything 

else, why should we trust them on 

this? 


Not quite as frightening as a 
Vampire Takeover or Living-Dead 
Takeover, a robot rebellion is still a 
disquieting thought. We are already 
outnumbered by our technological 
gadgets, and even Bill Gates fears 
the day his Japanese robot slave 
turns him over by the ankles and 
asks (in a suitably robotic voice) 
"Who's your daddu now?" 


ee. We don't know how the 
universe started. so we can't - 


| arc amcaug uuuidrimcerecu 


bu our technological 
gadgels, and even Bill 
Gates fears the day his 


VCUFILCITU wur WICTOUS 
storms, widespread food 
shortages, and surly air 
conditioning repairmen. 


Japanese robot slave 
turns him aver by the 
ankles and asks (in a 
suitably robotic voice) 
"Who's your daddy now?" 


Wili you be the last person standing 
(f one of these apocalyptic EPIDEMIC 
scenarios plays out? Some lime in the future, 


But don't get too smug. a lethal virus could 


There's still plenty of 
harrific ways it could all 
fall apart. In this article, 
you'll learn ahout a few 
of our favorites. 


—————————————— shrike. Predictions differ 
e« We don't know about the source of the 
how the universe disease, but candidates 


include monkeys in the 
started. SO We Afncan Jungle, 


cant be sure it bioterrorists，birds and 
won't jusi end pigs with the flu, warriors 


from the future, an alien 
maybe today. ,* race, hospitals that use 
—— too manu antibiotics, 
vampires, the CIA, and 


unwashed brussel 


Skeptics suggest that 
the Mayan calendar 
simply rolls to a new 
5,126-year era after 2012, ILC 
and doesn't actualu SESLENE SE sprouts. Whatever the 
predicL a life-ending We don't know how the source, it's clearly bad 
apocalypse But given universe started, 50 WC news. 


that the long-dead can'Lbe sure il won'L just 


These apocalyptic nraniatians na nat mfpet the views nf tha author 
bout Lis Disriaimar Contact Lis 
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虽然 在 指定 栏 宽 时 可 以 使 用 像素 单位 ， 但 使 用 em 单位 才 是 首选 。 因 为 em 单位 与 当前 字体 
大 小 是 匹配 的 ， 所 以 如 果 网 页 访客 调 大 了 浏览 器 中 的 字号 ， 那 么 栏 筑 也 会 按 比 例 加 大 。 
具体 来 说 ，lem 等 于 两 倍 字体 大 小 ， 因 此 对 于 12 像 素 的 字体 ，lem 就 是 24 像 素 。 


说 明 


除了 设置 栏 宽 , 还 可 以 设置 栏 间 距 ( 使 用 column-gap 属 性 ), 其 至 在 柱 间 添加 一 条 
Healunn rule), X-T ORE CURRUS, DEREAT, D 
及 如 何 让 插图 和 其 他 元 和 素 蜂 栏 等 内 容 ， 请 参考 W3C 网 站 中 关于 多 栏 内 容 的 标准 
( http://www.w3.org/TR/css3-multicol/ )。 ied, 在 本 书写 作 时 ， 还 没有 浏览 器 支持 这 些 高 级 
功能 。 


分 隔 线 ( 使 
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8.3 ”适用 不 同 的 设备 


假如 你 曾 用 移动 设备 长 时 间 地 上 网 冲浪 ( 这 种 可 能 性 很 大 )， 那 么 你 一 定 已 经 发 现 ， 巴 掌 大 
的 屏 硕 并 不 是 最 适合 Web 的 。 没 错 ， 你 可 以 深 动 屏 硕 ， 也 可 以 缩放 页 面 ， 但 整个 过 程 钨 怕 事 倍 功 
半 。 如 采 有 一 天 ， 你 突然 发 现 一 个 专门 为 手机 设计 的 站 点 ， 它 的 内 容 恰好 与 屏幕 大 小 协调 一 致 ， 
相信 你 一 定 会 有 相 见 恨 晚 的 感觉 。 

SK, 针对 茶 些 设备 ( 如 iPhone 和 iPad ) 设计 同一 网 站 的 特定 版 本 已 经 不 是 什么 新 鲜 事 儿 了 。 
这 些 专 门 设计 的 网 站 一 般 会 托 省 在 不 同 的 域名 下 ( 比如 《纽约 时 报 》 的 移动 版 网 站 地 址 就 是 
http://m.nytimes.com ) 不过， 这 样 做 也 有 难 言 之 闸 : 随 痢 移动 上 网 越 来 越 普 及 ,移动 设备 也 会 变 
得 干 奇 百 怪 、 各 式 各 样 ， 作 为 Web 开 发 人 员 ， 要 管理 那么 多 定制 的 站 点 ， 必 定 是 一 项 可 不 堪 言 的 
工作 。 

当然 啦 ， 为 不 同 的 设备 制定 不 同 的 厂 本 并 非 唯 一 的 出 路 。 比 如 ， 可 以 编写 服务 表 闪 代码 ， 检 
测 每 一 个 请 求 , 确定 该 请 求 来 目 什 么 浏览 硕 , 然后 再 把 匹配 的 内 容 发 回去 。 这 个 方法 听 起 来 不 错 ， 
但 前 提 是 你 必须 有 时 间 和 人 能力 。 啊 ,对 啦 一 一 要 是 能 根据 不 同 的 设备 调整 一 下 样式 表 , 不 就 可 以 
省 挥 复杂 的 开发 框架 或 者 服务 从 闹 代 人 码 了 吗 ， 不 就 简 单 了 吗 ? 

没 错 ， 你 说 的 就 是 媒体 查询 。 使 用 CSS3 的 这 个 新 功能 ， 根 据 不 同 的 设备 和 浏览 设置 选择 不 
同 的 样式 表 确 实 要 人 简单 很 多 。 只 要 使 用 得 当 , 那么 你 的 网 站 就 可 以 适应 任何 屏 禹 ,无 论 是 超大 玉 
才 的 宽屏 显示 入， 还 是 僵 合 一 握 的 iPhone， 连 一 行 HTML 都 不 必 改 。 


8.3.1 媒体 查询 


媒体 查询 束 古 取得 查看 页 面 的 设备 的 关键 信息 ( EERIKI NN. AREE. GR. SEF), NOD 
该 信息 应 用 不 同 的 样式 ， 其 至 更 换 完全 不 同 的 样式 表 。 图 8-9 展 示 了 使 用 媒体 查询 的 一 个 示例 
页 面 。 









































CSS 媒 体 类 型 
说 起 来 还 挺 有 意思 的 ,为 解决 多 设备 问题 ,CSS 的 制定 者 在 CSS2.1 中 就 曾经 做 过 一 次 尝试 ， 
引入 了 媒体 类 型 的 概念 。 恐怕 有 读者 就 利用 媒体 类 型 ， 提 供 过 打 印 样式 表 ， 
«head» 
d-- 屏 莫 显 示 时 使 用 这 个 样式 表 -> 


«link rel="stylesheet" media="screen" 
href="styles.css"> 
<!-- 打印 页 面 时 使 用 这 个 样式 表 --> 


«link rel-"stylesheet" media="print" 


href-"print styles.css"» 
</head> 
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这 里 的 media 属 性 还 可 以 接受 handheld 值 ， 这 个 值 的 意思 就 是 低 带 宽 、 小 屏幕 的 移动 设备 。 
大 多 数 移动 设备 都 会 尝试 寻找 并 使 用 handhe1d 类 型 的 样式 表 。 然 而 ， 要 用 这 个 media 属 性 来 处 
理 今 天 各 式 各 样 的 上 网 设备 ， 就 有 点 提 襟 见 肘 了 。( 不 过 ， 用 media 属 性 来 提供 朴素 的 打印 样式 
表 还 是 很 不 错 的 。) 


图 8- 9: 这 里 展示 了 同一 个 页 面 在 较 宽 浏 览 絮 


Oe | 窗口 (上) 和 较 窗 浏 览 器 窗口 (下) 中 的 外 
| - 观 。 通 过 使 用 媒体 查询 ， 实 现 了 页 面 样式 表 


随 窗口 收缩 而 自动 切换 , 侧 边 栏 变 成 了 页 脚 。 
为 此 ， 不 必 刷 新 页 面 





ik JG 8] C^HTML5XChapter 08, MediaQueries.h O ~ C X Ww c^ 
& Media edis X 








This region represents the sidebar. It fits 
whatever space is leftover on the right side. 
A media query turns this into a pink footer when 
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要 使 用 媒体 查询 ， 必 须 先 选 择 一 个 要 检测 的 属性 。 在 图 8-9 中 ， 关键 信息 是 max-width 属 性 ， 
这 个 属性 是 当前 窗口 中 页 面 的 宽度 。 比 这 个 属性 更 有 用 的 是 max-device-width 属 性 ， 这 个 属性 检 
测 的 是 最 大 的 屏 硕 客 度 。 如 果 max-device-width 属 性 的 值 不 大 ， 那 么 就 可 以 汤 定 用 户 使 用 的 是 手 
机 或 类 似 的 小 屏 硕 上 网 设备 。 

最 简单 的 使 用 媒体 查询 的 方式 就 是 , 写 出 一 个 站 点 的 标准 版 本 , 然后 再 有 选择 地 覆盖 相应 内 
容 。 在 图 8-9 所 示 的 例子 中 ， 内 容 分 为 两 个 区 块 : 


«article» 


























O 


</article> 
<aside> 


TE 
相应 地 ， 样 式 表 里 也 定义 了 两 条 规则 ， 分 别针 对 两 个 区 块 : 


article { 
border: solid 1px black; 
padding: 15px; 
margin: 5px; 
background: yellow; 
float: left; 
width: 330px; 

j 





aside { 
border: solid 1px black; 
padding: 15px; 
margin: 5px; 
background: yellow; 
position: absolute; 
float: left; 
margin-left: 370px; 

j 


VA. EL] SCR Y EE RII AVES B Je), ZEXI— ESHJISIXE 96 RE 793308 8 ,. 右边 的 侧 栏 则 填充 剩 下 
的 窗口 空间 。( 当然 ， 在 你 目 己 的 页 面 中 ， 可 以 运用 任何 基于 CSS 的 布局 技术 。) 

接 下 来 使 用 媒体 查询 ， 即 在 样式 表 中 单独 定义 一 条 规则 ， 针 对 要 查询 的 媒体 类 型 值 ， 语 法 
如 下 : 


@media (media-query-property-name: value) { 
/* 这 里 是 新 样式 */ 











对 我 们 这 里 的 例子 而 言 ， 当 浏览 齿 窗 口 的 宽度 等 于 或 小 于 480 像 系 时 ， 新 定义 的 样式 规则 就 
会 生效 。 换 句 话 说， 我 们 的 样式 表 中 一 定 会 有 下 面 这 条 规则 : 


@media (max-width: 480px) { 





Pin 
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提示 目前， 媒体 查询 中 最 常用 的 属性 是 max-device-width ( 用 于 创建 移动 版 网 页 )、max-width 
(用 于 根据 浏览 器 窗口 当前 大 小 改变 样式 ) 和 ofrientation ( 用 于 视 iPad 横 放 或 紧 放 来 切换 布 
局 )。 除 此 之 外 ， 媒 体 查询 规范 还 定义 了 其 他 可 以 检测 的 属性 ， 详情 请 参考 
http://www.w3.org/TR/css3-mediaqueries/ ; 


我 们 只 在 媒体 查询 规则 块 中 添加 了 针对 <article> 和 <aside> 元 素 的 新 样式 (你 当然 要 根据 自 
己 的 需要 来 添加 目 己 的 样式 声明 ): 


@media (max-width: 480px) 1 
article { 
float: none; 
width: auto; 
} 
aside { 
position: static; 
float: none; 
background: pink; 
margin-left: 5px; 
J 
} 


这 些 样式 会 在 前 面 定 义 的 常规 样式 基础 上 应 用 。 因 此 , 我 们 只 要 在 媒体 查询 块 中 把 那些 修改 
过 的 属性 重 置 为 其 默认 值 即 可 。 具 体 到 这 个 例子 ， 媒 体 查 询 后 的 样式 把 position 属 性 重 置 为 
static， 把 float 属 性 重 置 为 none， 把 width 属 性 重 置 为 auto。 这 些 本 来 都 是 默认 值 ， 只 是 最 初 的 
样式 改变 了 它们 。 





注意 ”Internet Explorer 8 等 不 理解 媒体 查询 的 浏览 器 ， 会 简单 地 忽略 新 样式 ， 在 任何 情况 下 一 
无 论 浏览 器 窗口 多 大 或 多 小 一 一 都 只 会 使 用 最 初 的 样式 。 








如 采 你 愿意 ， 还 可 以 再 添加 一 条 巡 体 得 询 规则 ， 当 窗口 变 得 更 小 时 重 置 上 一 套 样 式 。 比 如 ， 
下 面 这 条 规则 会 在 浏览 页 窗口 宽度 缩小 到 250 像 素 时 应 用 新 样式 : 


@media (max-width: 250px) { 


Pee 
WE, X6 y EH HJ TEE as o BU HRS PU Fe] n Js TE Hep uU. SS ARMS E A TEE i 

HT] I A URS EDSEASO BER HE EET 9S — RERE RRR AAA ERREK, 

好 像 也 有 点 费解 。 呵 呵 ， 不 用 担心 ,我 们 马上 会 在 下 一 市 介绍 一 个 紧 次 的 媒体 查询 方案 , 来 解决 


这 个 问题 。 
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提示 在 识别 上 网 手机 时 ， 要 使 用 max-device-width 属 性 ， 而 不 是 max-width 属 性 。 这 是 因为 
max-width 属 性 是 手机 视 口 的 宽度 ， 而 视 口 就 是 手机 用 户 可 以 滚动 页 面 的 区 域 。 通 常 ， 手 
机 屏幕 中 视 口 的 宽度 是 实际 屏幕 宽度 的 两 倍 。 要 理解 这 一 点 ( 以 及 视 口 的 可 视 化 表示 )， 
请 参考 Quirksmode 的 文章 http://tinyurl.com/yyec93n。 8.3.3 节 将 介绍 更 多 关于 在 移动 设备 中 
使 用 媒体 查询 的 内 容 。 


8.8.0 ”高 级 媒体 查询 
有 了 时候， 我 们 需要 让 样式 更 有 和 针对 性 ， 因 此 就 要 使 用 多 个 条 件 。 下 面 来 看 一 个 例子 : 


@media (min-width: 400px) and (max-width: 700px) { 


/+* 窗 口 宽度 介 于 400 像 素 到 700 像 素 之 间 时 ,应 用 这 些 样式 */ 
} 


如 条 需 要 应 用 几 组 互 斥 的 样式 ,而 且 不 想 因为 覆盖 之 前 的 规则 伤 脑筋 , 那么 这 种 语法 就 非常 
方便 了 。 再 比如 : 


/* 这 里 的 常规 样式 */ 





@media (min-width: 600px) and (max-width: 700px) { 
/*# 窗 口 宽 度 介 于 600 像 素 到 700 像 素 之 间 时 ， 履 盖 相 应 的 样式 */ 
J 


@media (min-width: 400px) and (max-width: 599.99px) { 
/*#* 窗 口 宽 度 介 于 400 像 素 到 600 像 素 之 间 时 ， 履 盖 相 应 的 样式 */ 


@media (max-width: 399.99px) { 
/* 窗 口 宽度 小 于 400 像 素 时 ， 窗 盖 相 应 的 样式 */ 








现在 ， 假 设 窗 口 宽 度 是 380 像 素 ， 那 么 就 会 应 用 两 组 样式 : 标准 样式 和 最 后 一 个 @media 块 中 
的 样式 。 这 种 方式 到 底 是 能 简化 任务 ,还 是 会 把 事情 搞 复杂 ， 完 全 取决 于 你 想 要 干什么 。 如 果 你 
要 写 的 样式 很 复 森 ， 而 且 每 次 都 改 很 多 ， 那么 这 里 展示 的 “ 非 覆 盖 ” 的 方式 就 是 最 简单 的 办 法 。 

但 使 用 这 个 办 法 时 ， 要 特别 注意 不 能 让 规则 之 间 意 外 发 生 冲 突 。 比 如 ， 要 针对 最 大 宽度 400 
像 厅 设置 一 条 规则 ， 又 要 针对 最 小 宽度 400 像 素 设 置 男 一 条 规则 ， 那 么 就 有 可 能 发 生 冲 突 。 为 避 
人 免 冲 突 ， 可 以 使 用 小 数 一 一 尽管 条 了 点 ， 比 如 399.99 像 素 。 

除了 使 用 小 数 ， 还 可 以 使 用 not 关 键 字 。 当 然 ， 两 者 在 功能 上 没有 区 别 ， 只 不 过 有 的 人 可 能 
会 觉得 下 面 这 种 方法 看 起 来 看 明确 ， 如 果 你 也 这 么 认为 ， 尽 管用 : 


/* 这 里 的 常规 样式 */ 





























@media (not max-width: 600px) and (max-width: 700px) { 
/* 窗 口 宽 度 介 于 600 像 素 到 700 像 素 之 间 时 ， 窗 盖 相 应 的 样式 */ 
} 


@media (not max-width: 400px) and (max-width: 600px) { 
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/# 窗 口 宽 度 介 于 400 像 素 到 600 像 素 之 间 时 ， 敌 盖 相 应 的 样式 #/ 
} 


Gmedia (max-width: 400px) { 

; /* 窗 口 宽度 小 于 400 像 素 时 ， 窗 盖 相 应 的 样式 */ 

这 种 情况 下 ， 仍 然 要 考虑 履 盖 一 次 样式 。 因 为 每 条 @media 规 则 都 会 以 常规 的 非 媒 体 碍 询 的 规 
则 为 基础 。 根 据 实际 情况 ， 有 时 候 可 能 需要 把 针对 不 同 设备 的 样式 区 分 开 来 ( 例如， 针对 移动 设 
备 的 样式 单独 写 一 组 完全 独立 的 样式 )。 为 此 ， 就 要 把 媒体 查询 和 外 部 样式 表 结 合 起 来 ， 而 这 正 
是 下 面 我 们 要 讨论 的 。 


8.3.3” 莹 换 整个 样式 表 


在 修改 量 不 大 的 情况 下 ， 使 用 @media 块 很 方便 ， 因 为 可 以 把 所 有 样式 都 集中 在 一 个 文件 内 。 
但 如 果 不 同情 况 下 的 样式 区 别 很 大 , 那么 如 怕 还 是 单独 创建 一 个 样式 表 文 件 更 合适 。 创建 了 单独 
的 样式 表 文 件 后 ， 就 可 以 像 下 面 这 样 通过 媒体 查询 链接 到 该 样式 表 : 

<head> 


«link rel="stylesheet" href="standard Styles > 
«link rel="stylesheet" media="(max-width: 480px)" href-"small styles.css"> 
































«/head» 

这 样 ， 浏 览 融会 在 下 载 页 面 的 同时 下 载 第 二 个 样式 表 (small styles.ess ), 1H. ARN Và de fei H 
宽度 缩小 到 最 大 值 时 才 会 应 用 该 样式 表 。 

与 前 面 例子 中 展示 的 一 样 , 这 个 样式 表 中 的 新 样式 也 会 履 盖 原来 的 同名 样式 。 而 某 些 情况 下 ， 
我 们 真正 需要 的 是 完全 分 离 、 互 不 影响 的 样式 表 。 为 此 ,首先 要 为 标准 的 样式 表 添加 一 个 媒体 查 
询 ， 确 定 它 只 适用 于 大 窗口 : 


«link rel="stylesheet" media-"(min-width: 480.01px)" href-"standard styles "> 
«link rel="stylesheet" media-"(max-width: 480px)" href-"small styles.css"» 


这 样 添 加 样式 的 问题 在 于 , 不 文 持 媒体 查询 的 浏览 右 会 把 这 两 个 样式 表 都 忽略 掉 。 要 解决 这 
个 问题 ， 对 老 厂 本 的 正 可 以 使 用 条 件 注释 再 添加 一 次 主 样式 表 : 
«link rel="stylesheet" media-"(min-width: 480.01px)" href-"standard styles"» 
«link rel="stylesheet" media-"(max-width: 480px)" href-"small styles.css"» 
«1--[if lt IE 9]» 
«link rel="stylesheet” href-"standard styles"» 
«1[endif]--» 


但 是 , 除了 老 版 本 的 三 ， 老 版 本 (3.5 版 之 前 ) 的 Firefox 既 不 支持 媒体 查询 ， 也 不 支持 针对 IE 
的 条 件 注释 。 这 种 情况 下 ， 可 以 使 用 JavaScript 来 检测 浏览 妖 ， 然 后 切换 到 新 页 面 。 好 在 ， 老 版 本 
的 Firefox 已 经 在 渐渐 地 销声匿迹 本。 

男 外 ， 偶尔 也 可 能 需要 针对 媒体 类 型 (参见 前 面 的 附注 “CSS 媒 体 类 型 ”) 来 使 用 媒体 查询 。 
此 时 请 注意 , 一 定 要 把 媒体 类 型 放 在 前 面 ， 而且 不 要 把 媒体 类 型 放 到 括号 内 。 例如 ,下 面 就 是 根 
据 页 面 宽度 来 设置 打印 用 样式 表 的 代码 : 
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«link rel-"stylesheet" media-"print and (min-width: 25cm)" 
href-"NormalPrintStyles.css" > 

«link rel-"stylesheet" media-"print and (not min-width: 25cm)" 
href-"NarrowPrintStyles.css" > 


8.3.4 识别 移动 设备 


前 面 介 绍 过 ， 在 媒体 查询 中 通过 max-device-width 可 以 区 别 普 通 计算 机 和 移动 设备 。 但 这 个 
宽度 值 应 该 设 定 为 多 大 呢 ? 

如 果 你 想 针 对 手机 设置 媒体 查询 , max-device-width 的 值 应 该 设置 为 480 像 素 。 这 是 一 条 通用 
规则 。 这 个 宽度 值 匹配 iPhone 和 Android 系 统 的 手机 : 


«link rel="stylesheet" media-"(max-device-width: 480px)" 
href= mobile styles.css"» 


对 手机 硬件 有 研究 的 读者 可 能 会 立即 警 党 起来: 今天 的 手机 虽然 屏幕 小 , 但 分 辩 率 还 是 很 高 
的 。 就 拿 iPhone 4 来 说 吧 ， 它 那 小 屏幕 的 分 辨 率 已 经 达到 了 960 像 素 x 640 像 素 。 对 这 么 高 的 分 辨 
率 ， 是 不 是 应 该 指定 更 大 的 宽度 值 呢 ? 告诉 你 , 不 用 ! 因为 无 论 其 真正 的 分 辨 率 有 多 高 ， 大 多 数 
手机 仍然 告诉 浏 览 硕 目 己 的 宽度 是 480 像 素 。 它 们 的 真实 像素 与 报告 像素 之 间 有 个 比率 ， 叫 做 像 
素 比 。 对 于 iPhone 4 来 说 ， 每 个 CSS 像 素 等 于 两 个 物理 像 率 ， 因 此 像 闵 比 是 2。 事 实 上 ， 利 用 这 一 
点 ， 你 就 可 以 写 一 个 只 匹配 iPhone 4 的 媒体 查询 : 


«link rel="stylesheet" 
media-"(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" 
href-"iphone4.css"» 


iPad 的 问题 稍微 有 点 复杂 : 用 户 可 能 会 旋转 它 ， 水 平 或 紧 直 浏览 。 虽 然 从 水 平 变 成 垂直 会 改 
变 max-width 值 ， 但 max-device-width 值 不 会 变 。 换 名 话说， 无 论 是 水 平 还 是 紧 直 状态 ，iPad 都 会 
告诉 浏览 融 它 的 设备 贤 度 (max-device-width ) 是 768 像 素 。 不 过 ， 好 在 还 有 一 个 orientation 属 
性 。 如 果 你 想 根 据 iPad 的 姿态 来 切换 样式 表 ， 可 以 组 合 使 用 max-device-width 和 orientation: 
«link rel-"stylesheet" 


media-"(max-device-width: 768px) and (orientation: portrait)" 
href-"iPad portrait.css"» 






































«link rel-"stylesheet" 
media-"(max-device-width: 768px) and (orientation: landscape)" 
href-"iPad landscape.css"» 


当然 ， 以 媒体 查询 媒体 不 仅 适 用 于 iPad。 其 他 具有 类 似 屏 幕 大 小 〈768 像 素 或 更 小 ) 的 平板 
设备 ， 神 会 应 用 这 两 个 样式 表 。 





注意 ， 光 指望 媒体 查询 把 一 个 常规 网 站 变 成 移动 版 是 不 够 的 。 你 还 得 考虑 带宽 和 用 户 体验 。 带 
宽 也 就 是 网 速 ， 因 此 对 于 移动 版 应 该 提供 更 小 的 图 片 。( 可 以 为 元 素 添加 背景 图 片 ， 然 后 
在 样式 里 设置 图 片 大 小 。 但 是 ， 对 于 图 片 比较 多 的 网 站 ,这 个 办 法 并 不 好 。 ) 谈 到 用 户 体 
验 ， 应 该 考虑 把 内 容重 新 组 织 成 小 块 ( 这样 用 户 就 不 用 滚动 页 面 了 )， 去 掉 那 些 通过 和 触摸 
不 容易 操作 的 交互 元 素 和 效果 (例如 弹出 式 菜 单 )。 
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针对 视频 的 媒体 查询 

在 提供 视频 方面 ， 虽 面 版 网 站 与 移动 版 网 站 有 一 个 明显 的 差别 。 移动 网 站 中 也 有 视频 ,但 
通常 视频 窗口 较 小 ,而 且 媒 体 文件 也 较 小 。 原因 很 简单 ,移动 浏览 器 速度 慢 、 上 网 下 载 视 频 费 
用 高 ， 而 且 硬 件 性 能 相对 不 高 。 

利用 前 面 介绍 的 媒体 查询 技术 , 很 容易 把 video> 元 素 改变 为 适合 移动 设备 的 大 小 。 但 是 ， 
要 重新 链接 到 “瘦身 ”版 的 视频 文件 就 没有 那么 容易 了 ， 而 这 一 步 又 是 至 关 重 要 的 。 

HTMLS 为 此 提供 了 一 个 方案 : 直接 在 <source2 元 素 中 添加 media 属性 。 第 $ 章 已 经 介绍 
了 ,<xsource2 元 素 用 于 为 <video> 元 素 指 定 要 播放 的 媒体 文件 。 通过 添加 media 属性 , 就 可 以 限 
制 某 些 设备 只 播放 特定 的 媒体 文件 。 

下 面 这 个 例子 展示 了 如 何在 小 屏幕 设备 上 处 理 butterfly mobile.mp4 文件 。 其 他 设备 将 根 
据 自 身 支持 的 媒体 格式 ， 播 放 butterfly.mp4 或 butterfly.ogv。 


«video controls width-"400" height= 300 > 
«source src-"butterfly mobile.mp4" 
type-"video/mp4" 
media-"(max-device-width: 480px)"» 
«source src-"butterfly.mp4" type-"video/mp4"» 
«source src-"butterfly.ogv" type-"video/ogg"» 
«/video» 


当然 ， 如 果 愿 意 ， 你 也 可 以 为 移动 用 户 重 新 压制 一 份 视 频 。 视 频 编码 工具 都 有 针对 特定 设 
备 的 预 设 ， 只 要 简单 配置 一 下 即 可 。 比 如 ， 有 些 工 具 会 提供 “iPad 视 频 ” 之 类 的 选项 。 同 样 ， 
针对 不 同 的 设备 把 视频 压制 成 哪 种 格式 (通常 是 了 .264 )， 如 何 区 别 每 一 款 浏览 器 也 取决 于 你 
自己 。 


8.4 多 变 的 盒子 


从 CSS 诞 生 之 初 ，Web 设 计 者 就 用 它 来 创建 内 容 盒 子 。 随 肴 CSS 的 功能 越 来 越 丰 宇 ， 盒 子 的 
形式 也 越 来 越 吸 引 人 , 能 够 用 它 实现 种 阴影 的 标题 浮动 的 标题 插图 等 很 多 有 用 的 元 条 ,而 当 CSS 
解决 了 甚 集 的 问题 之 后 ,浮动 盒子 甚至 变 导 成 了 多 种 多 样 、 流 光 洪 彩 的 按钮 ,一 举 取 代 了 过 去 穴 
拙 的 JavaScript 手 段 。 了 解 了 这 些 之 后 ， 再 运用 最 受 欢 迎 也 最 受 文 持 的 CSS3 功 能 做 出 更 深 亮 的 盒 
子 一 一 无 论 用 于 包含 什么 内 容 ， 也 就 不 足 为 奇 了 。 

















8.4.1 透明 盒子 


生成 部 分 透明 的 图 片 和 颜色 是 CSS3 的 一 个 基本 功能 。 实 现 透 明 效 末 的 方法 有 两 种 。 

第 一 种 是 使 用 rgba() 函 数 ， 它 接收 4 个 数值 作为 参数 。 前 三 个 值 分 别 代 表 色 彩 中 的 红 、 绿 、 
蓝 分 量 ， 取 值 范 围 为 0 一 25$。 最 后 一 个 值 是 alpha (不 透明 度 ) 值 ， 取 值 范围 为 0 ~ 1; 0 表示 完全 
透明 ，1 表 示 完 全 不 透明 。 

下 面 这 个 例子 会 创建 一 个 半 透 明 的 黄 绿 色 背 景 : 
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.SemitransparentBox { 
background: rgba(170,240,0,0.5); 
Jj 
Asc Tirgba() KEN Vi i s 2 M Joe 8 LIU] ,. 而 相应 的 元 素 会 市 有 默认 不 透明 的 背景 。 当 然 ， 
更 好 的 做 法 是 和 完 声 明 一 个 实心 的 后 备 颜 色 ， 然 后 再 用 半 透 明 闫 色 禾 六 它 : 
.SemitransparentBox { 
background: rgb(170,240,0); 
background: rgba(170,240,0,0.5); 


} 
这 样 , BIS Sc Frrgba () KZN Vise , 也 会 应 用 指定 的 育 景 颜色 ,只 过 不 一 点 也 不 透明 而 已 。 








提示 “为 了 保证 后 备 青 入 的 效果 ， 应 该 选择 一 种 与 半 透 明 效 果 接 近 的 颜色 。 比 如 ， 前 面 例子 中 
用 的 是 半 透 明 的 黄 绿色 ， 而 下 方 元 素 的 背景 则 是 白色 ， 由 于 白色 会 透 出 那些 半 透 明 的 像 
素 ， 结 果 就 会 显得 比较 亮 。 在 选择 后 备 颜 色 时 ， 应 该 尽量 选择 一 个 接近 的 亮色 。 


另外 ，CSS3 还 新 增 了 一 个 名 为 opacity 的 属性 ， 这 个 属性 的 原理 与 alpha 仁 一样 〈《opacity 这 
个 单词 的 意思 就 是 不 透明 ) 取 值 范围 为 0 一 1; 0 表示 完全 透明 ，1 表 示 完 全 不 透明 : 


.SemitransparentBox { 
background: rgb(170,240,0); 
opacity: 0.5; 


图 8-10 展 示 了 两 个 半 透 明 的 例子 ， 一 个 使 用 rgba() 孙 数 ， 力 一 个 使 用 opacity 属 性 。 





图 8-10: Pa pE 
X: 淡化 图 片 ( 使 用 opacity 属 性 ) 和 让 背景 透 
盒子 ( 使 用 rgba() 函 数 创 建 半 透明 的 背景 色 ) 


" 
wk 二 Je >) E] CAHTML5\Chapter 08\Transparency.html O~ OX| (5 Yr So 


e Transparency 











在 下 列 情 况 下 ， 建 议 使 用 opacity 属 性 而 不 是 rgba() AŽ. 

口 实现 多 种 颜色 ( 元素 ) 的 半 透 明 效 果 。 使 用 opacity 属 性 ,不 仅 背 景 颜色 ， 就 连 文本 颜色 、 
边框 颜色 都 会 变 透 明 。 

OQ 在 不 知道 颜色 的 情况 下 ， 实 现 半 透明 效果 〈 比 如， 通过 其 他 样式 表 或 者 JavaScript 人 代码 来 
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设置 半 透 明 效 采 )。 
口 实现 图 片 的 半 透 明 效 果 。 
口 实现 渐变 动画 效果 时 ， 比 如 元 系 的 淡 入 淡出 ( 参见 8.5 广 )。 


8.4.» HAF 


还 记得 border-radius 属 性 吗 ? 这 个 属性 可 以 帮 我 们 把 盒子 的 方 角 刊 得 圆滑 一 些 ， 这 一 点 我 
们 介绍 过 了 。 但 我 们 没有 介绍 的 是 ， 可 以 利用 这 个 属性 做 出 曲线 来 。 

首先 ， 可 以 为 border-radius 属 性 选择 不 同 的 值 ， 这 里 的 radius (半径 ) 指 的 是 圆 角 的 半径 。 
当然 , 最 终结 果 不 会 显示 一 个 完整 的 圆 , 只 有 水 平和 垂直 线 这 两 条 切线 和 部 分 圆 距 。 半径 值 越 大 ， 
圆 驳 越 长 ， 圆 角 就 越 平 清 。 与 CSS 中 的 其 他 属性 类 似 ， 这 个 属性 的 值 也 可 以 使 用 多 种 单位 ， 包 括 
像素 和 百分比 。 还 可 以 提供 4 个 值 ， 分 别 对 应 4 个 圆 角 : 


.roundedBox { 
background: yellow; 
border-radius: 25px 50px 25px 85px; 
} 
不 仅 如 此 , 还 可 以 把 圆 拉 伸 成 桶 圆 ， 即 让 某 一 个 轴 癌 的 圆 弧 更 长 。 要 实现 这 个 效 来 ， 就 要 单 
独 设 定 每 一 个 角 ( 使 用 比如 border-top-left-radius 这 样 的 属性 )， 然 后 提供 两 个 值 : 一 个 是 水 平 
半径 ， 另 一 个 是 垂 百 半径 。 
.roundedBox { 
background: yellow; 
border-top-left-radius: 150px 30px; 
border-top-right-radius: 150px 30px; 


) 
图 8-11 展 示 了 一 些 例子 。 





图 8-11: 动 动脑 子 ， 可 以 创建 出 形状 各 异 的 盒子 
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8.4. ARAT 


BE, ZAE wA A RAET, —ABESpECKHRTÉEDT. CSSS AMEA TE2$ 
引入 了 两 个 新 功能 。 首先 , 就 是 文 持 多 背景 , PERRETE — T 2038 EJ HIPH: RGB EHE o 
下 面 这 个 例子 就 为 一 个 盒子 的 左上 和 右 下 分 别 应 用 了 背景 : 

.decoratedBox { 

margin: 50px; 

padding: 20px; 

background-image: url('top-left.png'), url('bottom-right.png'); 
background-position: left top, right bottom; 

background-repeat: no-repeat, no-repeat; 

} 

第 一 步 是 设 定 任 何 数量 的 图 片 ， 使 用 的 还 是 background-image 属 性 。 然 后 ， 再 设置 每 张 图 片 
的 位 置 并 控制 它们 是 否 重 复 , 分 别 使 用 background-position 和 background-repeat 属 性 。 这 里 关键 
是 这 三 个 属性 值 的 顺序 要 匹配 。 换 句 话 说, 第 一 张 图 请 的 位 置 由 background-position 属 性 的 第 一 
个 值 决定 ， 第 二 张 图 片 的 位 置 由 background-position 属 性 的 第 二 个 值 决定 ， 以 此 类 推 。 图 8-12 显 


未 了 这 个 例子 的 结 


Hi 











图 8-12: 无 论 盒子 长 多 大 也 没有 关系 ， 背 景 图 
片 始终 都 会 靠 在 角 上 
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注意 ”如 果 浏 览 器 不 支持 多 背景 ， 那 么 它 会 完全 忽略 这 些 背 最 属性 。 为 避免 全 有 全 无 的 结果 ， 


A 
最 好 还 是 先 用 background-image 或 background-color 属 性 设置 一 个 后 备 的 背景 图 片 或 闫 
色 。 然 后 再 继续 用 background-image 设 置 多 张 图 片 。 


下 面 这 个 例子 对 前 面 的 例子 各 微 做 了 一 点 改进 ， 克 ® 实 现 了 原来 极 旨 时 间 的 所 请 滑动 门 技术 。 
同样 ， 还 是 使 用 了 三 张 图 片 : 一 张 在 左 端 ， 一 张 在 右 闹 ， 还 是 一 张 罕 罕 的 在 中 间 : 


.decoratedBox { 
margin: 50px; 
padding: 20px; 
background-image: url('left.png'), url('middle.png'), url('right.png'); 
background-position: left top, left top, right bottom; 
background-repeat: no-repeat, repeat-x, no-repeat; 
j 
这 样 ， 就 利用 多 背景 创建 了 一 个 可 以 自由 缩放 的 按钮 。 当 然 ， 既然 CSS3 还 提供 了 更 多 功能 ， 


那么 为 按钮 加 上 阴影 、 渐 变 和 其 他 不 依赖 图 片 的 效 末 可 能 更 有 了 吸引 力 。 




















8.4.4 DES 

CSS3 定 义 了 两 种 阴影 : £x BISAAMDCARBASSE S DUE SS xd BB) PESE, mu HP 
阴影 也 更 有 用 。Internet Explorer 的 任何 版 本 都 不 文 持 文本 阴影 。 比 如 ， 可 以 为 cdiv> 元 素 添加 一 
个 矩形 的 阴影 〈 同 时 也 要 设置 边框 ， 这 样 就 仍然 有 盒子 的 感觉 )。 另 外 ， 阴 影 还 可 以 随 看 盒子 的 
形状 而 变化 〈 见 图 8-13 )。 








| ss 图 8-13: 阴影 可 以 让 文本 显得 浮 起 来 ( 上 ) 、 让 盒子 突 
SEI we | 出 显示 (中 )、 让 按钮 产生 发 光 效果 (下 ) 
| € Q |Q Shadows.html 


Shadowed Text. 





生成 这 两 种 阴影 的 属性 分 别 是 box-shadow 和 text-shadow。 下 面 是 创建 盒子 阴影 的 一 个 简单 
示例 : 
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. shadowedBox 1 
border: thin #336699 solid; 
border-radius: 25px; 
box-shadow: 5px 5px 10px gray; 


} 

前 两 个 值 是 水 平和 垂直 方 回 的 偶 移 量 。 如 有 末 是 正 值 ( 像 这 里 两 个 值 都 是 5$ 像 系 ) 那么 阴影 就 
会 问 右 癌 下 偶 移 。 接 下 来 第 三 个 值 (这 个 例子 中 是 10 像 系 ) 设置 模糊 距离 ， 也 就 是 阴影 的 模糊 程 
度 。 最 后 一 个 值 是 阴影 颜色 。 假如 盒子 底下 有 内 容 的 话 ， 可 以 考虑 在 这 个 值 的 位 置 上 使 用 rgba() 
PRAE (25 0,6.1.5 5 )， 从 而 将 阴影 颜色 设置 为 半 透 明 的 。 

假如 你 还 想 再 调整 一 下 阴影 ， 还 有 两 个 地 方 可 以 下 手 。 第 一 个 地 方 就 是 在 模糊 值 与 颜色 值 
之 间 ， 在 这 个 地 方 加 一 个 值 ， 用 于 设置 阴影 伸展 范围 《spread )， 即 增 大 模糊 边界 之 前 的 实心 颜 
色 面 积 : 

box-shadow: 5px 5px 10px 5px gray; 

第 二 个 地 方 就 是 值 列 表 的 末尾 ， 可 以 在 最 后 加 上 单词 inset， 这 样 就 可 以 在 元 系 内 部 〈 而 不 
是 外 部 ) 创建 一 个 阴影 。 在 不 设置 水 平和 乒 直 仿 移 值 的 情况 下 这 个 效果 是 最 好 的 : 

box-shadow: Opx Opx 20px lime inset; 


这 行 代码 得 到 的 就 是 图 8-13 下 面 的 那个 按钮 效 末 。8.5.1 节 将 介绍 为 按钮 添加 悬 停 时 的 内 阴影 




















注意 有 阴影 辛 好 的 开发 者 可 能 会 为 一 个 元 素 添加 多 个 阴影 ， 只 要 把 每 个 阴影 的 值 列表 用 去 号 
分 隔 开 即 可 。 但 我 们 并 不 推荐 这 种 浪费 时 间 和 电能 的 做 法 。 


类 似 地 ，text-shadow 属 性 也 需要 一 个 值 列表 ,但 值 的 顺序 有 所 不 同 。 首 先 要 指定 闫 色 值 ， 
然后 才 是 水 平和 垂直 俩 移 值 ， 最 后 是 模糊 值 : 


.textShadow { 
tont-size: :30pXj 
font-weight: bold; 
text-shadow: gray 10px 10px 7px; 


j 


8.4.5 ”渐变 盒子 


渐变 是 多 种 闫 色 混 合 而 成 的 效果 ,可 以 用 来 创建 淋 单 栏 后 面 精细 的 奔 纹 , 或 者 五 彩 斑 泣 的 按 
钮 (就 像 1960 年 代 复活 市 晚会 上 的 彩 灯 ) 图 8-14 展 示 了 几 个 例子 。 








注意 很 多 网 页 中 的 渐变 其 实 都 是 用 背景 图 片 来 伪造 。CSS3 可 以 让 我 们 自己 来 定义 渐变 ， 然 后 
浏览 既 就 会 负责 呈现 。CSS3 渐 变 的 优点 是 可 以 让 浏览 器 少 下 载 图 片 ， 而 且 这 种 渐变 能 够 
无 终 地 适应 各 种 大 小 的 空间 。 
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LANE č | i co | 日 msan [&l 8-14. Am, 渐变 
| 口 Gradients —| “就 是 两 种 或 更 多 种 颜色 


(€) ||] file///C/HTMLS/Chapter 08/Gradients.html "BLA. Aq. E3 GR, 4A 
Rm Hy E EH o 但 就 是 这 么 [BJ 





单 的 拼合 ， 却 可 以 创造 
出 光怪陆离 的 效果 








This linear gradient goes from corner to corner. Light colors make for a subtle effect. 
background: -moz-linear- gradient(top left, white, lightblue) 





7.2.3 B XE THE HARI TE BE, 已经 介绍 过 这 种 效果 了 。CSS3 中 定义 渐变 的 语法 与 之 类 
似 ， 也 支持 两 种 渐变 : 线性 渐变 和 放射 性 汤 变 。 线 性 渐变 就 是 泊 直 线 混 合 几 种 颜色 ， 而 放射 性 渐 
变 则 是 在 圆心 到 圆周 之 间 混 合 颜色 。 

CSS3 并 没 能 给 创建 渐变 提供 任何 属性 。 要 创建 渐变 ， 必 须 使 用 渐变 函数 来 设置 background 
属性 。 提 个 醒 儿 ， 考 虑 到 有 的 浏览 紫 可 能 不 支持 渐变 ， 千 万 别 忘 了 先 写 一 条 background 声 明 ， 为 
该 属性 指定 一 个 实心 颜色 作为 后 备 。( 哪个 训 览 需 不 文 持 渐变 ? 当然 主要 是 Internet Explorer, 
IE10 之 前 的 版 本 都 不 文 持 渐变 。) 

有 4 个 渐变 困 数 ， 要 使 用 它们 必须 得 这 上 8.1.4 节 讨论 过 的 开发 商 前 缀 。 本 节 的 例子 主要 针对 
Firefox， 所 以 我 们 使 用 -moz- 前 级 。 对 于 Chrome 、Safari 要 使 用 -webkit- 前 级 ， 而 对 于 Opera， 则 
要 使 用 -o- 前 级 。 

先 来 看 第 一 个 ，Linear-gradient() 困 数 。 下 面 的 代码 展示 了 使 用 这 个 图 数 的 简单 形式 ， 这 样 
会 创建 一 个 从 上 到 下 ， 从 白 到 蓝 的 渐变 效果 : 


.colorBlendBox { 
background: -moz-linear-gradient(top, white, blue); 


} 

把 这 里 的 top 换 成 left， 就 可 以 创建 从 左 到 右 的 日 蓝 渐 变 。 要 想 创 建 从 左上 和 角 到 右 下 角 的 渐 
变 呢 ? fg. IUBET: 

background: -moz-linear-gradient(top left, white, lightblue) 

我 想 多 用 几 种 颜色 。 没 问题 ， 只 要 依次 列 出 颜色 值 即 可 。 比 如 ， 要 创建 一 个 红 、 橙 、 黄 的 三 
色 渐 变 ， 这 样 写 束 可 以 了 : 
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background: -moz-linear-gradient(top, red, orange, yellow); 

最 后 ， 还 可 以 使 用 渐变 点 〈gradient stop ) 控制 每 个 颜色 的 起 点 。 每 个 渐变 点 用 百分比 值 表 
示 ，0% 就 是 整个 渐变 的 起 点 ， 而 100% 则 是 整个 渐变 的 终点 。 下 面 这 个 例子 把 橙色 和 黄色 的 范围 
扩展 到 了 中 间 


background: -moz-linear-gradient(top, red 0%, orange 20%, yellow 80%, violet 100%); 

要 创建 放射 性 渐变 , fii Hradial-gradient()PAZ&. 我们 要 为 这 个 函数 提供 一 个 圆心 颜色 和 一 
个 圆周 颜色 ,圆周 与 元 素 边界 接触 。 下 面 这 个 放射 性 渐变 其 圆心 是 日 色 ， 然 后 逐渐 过 滤 到 圆周 的 
EG: 

background: -moz-radial-gradient(circle, white, lightblue) 
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还 在 确定 简单 、 一 致 的 语法 。 要 了 解 更 多 关于 渐变 的 示例 ,以 及 另外 两 个 本 书 不 会 讨论 的 函数 一 一 
repeating-linear-gradient()/fllrepeating-radial-gradient(), ， 请 参考 Safari 的 这 篇 短 博 客 : 
http://www.webkit.org/blog/1424/css3-gradients/ 。 另 外 ， 也 可 以 使 用 微软 的 这 个 在 线 工 具 : 
http:/tinyurl.comy/Srzocsk， 点 击 选择 想 要 的 渐变 ， 它 就 能 为 你 生成 针对 所 有 浏览 融 〈 包 括 下 10 ) 
的 标记 。 

















提示 在 所 有 这 些 例子 中 ， 渐 变 都 是 通过 background 属 性 实现 的 。 实 际 上 ， 对 background-image 
属性 使 用 同样 的 渐变 函数 也 能 达到 相同 的 目的 。 唯 一 的 区 别 是 使 用 background-image 属 
性 ， 可 以 创建 背 录 图 像 作 为 后 备 。 方 法 相信 不 说 你 也 知道 ， 即 先 用 background-image 属 性 
为 那些 后 进 的 浏览 器 指定 一 个 类 似 的 背景 图 片 , 然后 再 对 background-image 属 性 应 用 渐变 
马 数 。 支 持 渐变 的 浏览 器 一 般 也 很 聪明 ， 除 非 必 要 ， 否 则 它们 不 会 下 载 后 备 图 片 ， 从 而 


-J- y M nP 
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8.5 ”创建 过 渡 效 果 


CSS 目 从 引入 了 伪 类 (参见 附录 A ) 之 后 ， 极 大 地 解放 了 Web 开 发 人 员 。 仿佛 一 夜 之 间 ， 大 
家 用 :hover 和 :focus 伪 类 ， 就 能 实现 原来 需要 JavaScript 才 能 做 出 来 的 效果 。 比 如 ， 要 为 按钮 创建 
鼠标 上 甚 集 效 果 ， 只 要 为 :hover 伪 类 应 用 一 组 新 样式 即 可 。 当 访客 鼠标 移动 到 按钮 上 面 时 ， Dv 
就 会 目 动 为 按钮 应 用 这 些 组 新 样式 。 











提示 ”万 一 你 还 不 知道 怎么 创建 按钮 的 鼠标 悬 停 效 果 ， 千 万 要 看 一 看 Creating a Webaite: The 
Missing Manual (OReilly ) 这 本 书 。 另 外 ， 看 看 这 篇 文章 也 行 : http://www.elated.com/ 
articles/css-rollover-buttons/. 
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伪 类 创造 的 交互 特性 虽 好 , 但 已 经 有 点 过 时 了 。 主 要 问题 是 一 一 太 突 然 了 。 换 句 话 说， 如果 
使 用 了 :hover 伪 类 ， 鼠 标 放 上 去 马上 换 样 式 ， 鼠 标 一 离开 马上 就 没有 ， 太 突然 了 。 太 突然 了 就 显 
示 得 不 自然 了 。 想 想 在 Flash 必 用 或 者 其 他 更 面 应 用 中 , 类 似 的 效果 要 优雅 得 多 。 当 我 们 把 鼠标 悬 
停 到 某 个 按钮 上 时 ， 其 颜色 会 切换 、 位 置 会 改变 ， 甚 至 会 发 光 ， 整 个 过 程 会 持续 一 小 段 时 间 ， 而 
上 且 是 以 动画 效果 完成 。 

不 少 Web 开 发 人 员 已 经 开始 在 自己 的 网 页 中 添加 类 似 的 效果 了 。 但 这 些 效 果 一 般 都 要 借助 第 
三 方 的 JavaScript 动 画 框架 来 完成 。 实 际 上 ，CSS3 提 供 了 一 个 更 简单 的 方案 ， 即 新 的 过 渡 
(transition ) 功能 ， 可 以 从 一 组 样式 平滑 地 切换 到 另 一 组 样式 。 


8.5.1 基本 的 颜色 过 波 


要 理解 什么 是 过 渡 ， 最 好 是 看 一 个 例子 。 图 8-15 展 示 了 一 个 按钮 的 颜色 过 渡 ， 使 用 了 CSS3 
的 过 渡 功 能 。 


























图 8-15; 如 果 这 是 普通 的 翻转 按钮 , 那么 鼠标 一 上 来 背景 就 会 突然 
LI. 从 绿色 变 成 黄色 。 但 使 用 了 过 渡 之 后 ， 绿 色 会 融入 黄色 ， 切 换 过 


程 会 持续 半 秒 钟 。 鼠 标 离开 按钮 后 ， 相 同 的 过 滤 又 会 发 生 ， 只 不 
过 颜色 切换 的 顺序 相反 ， 之 后 按钮 恢复 到 初始 状态 。 给 人 的 感觉 
就 是 按钮 很 精致 








下 面 是 不 使 用 过 渡 的 实现 方式 : 
.SlickButton { 

color: white; 

font-weight: bold; 

padding: 10px; 

border: solid 1px black; 

background: lightgreen; 

Cursor: pointer; 


j 





.SlickButton:hover { 
color: black; 
background: yellow; 

} 


按钮 的 标记 如 下 : 

«button class-"slickButton"»Hover Here!«/a» 

为 了 使 用 过 渡 把 整个 过 程 变 得 平滑 ， 需 要 设置 transition 属 性 。 而 相应 的 属性 声明 要 写 在 正 
津 状 态 下 的 .slickButton 样 式 规则 中 ( 而 不 是 :hover 伪 类 规则 中 )。 

最 低 限 度 也 要 为 每 个 过 渡 设 置 两 方面 信息 : 要 过 渡 的 CSS 属 性 和 动画 时 长 。 在 这 个 例子 中 ， 
过 渡 的 是 背景 闫 色 ， 而 持续 时 间 为 0.5 秒 : 
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.slickButton { 
color: white; 
font-weight: bold; 
padding: 10px; 
border: solid 1px black; 
background: lightgreen; 
cursor: pointer; 
-webkit-transition: background 0.5s; 
-moz-transition: background 0.5s; 
-0-transition: background 0.5s; 


j 


.SlickButton:hover { 
color: black; 
background: yellow; 


} 

我 想 你 一 定 注意 到 了 ， 这 个 例子 使 用 了 三 个 过 渡 属 性 ， 但 没有 一 个 是 我 们 说 的 transition。 
这 是 因为 CSS3 过 渡 标 准 还 在 开发 中 ， 浏 览 套 文 持 的 都 是 市 开发 商 前 绥 的 属性 名 。 为 了 让 过 渡 在 
Chrome, Safari, 、Firefox 和 Opera 中 都 能 有 效 ， vei doge 同 版 本 。 将 来 如 果 
Internet Explorer 10 也 文 持 过 渡 的 话 〈 应 该 是 文 持 的 )， 悉 人 旧 还 要 再 写 一 -ms- 前 级 的 版 本 。 使 
用 这 些 试验 阶段 的 属性 名 确实 会 让 样式 表 看 起 来 有 点 乱 。 

杀手 试验 一 下 ,会 发 现 这 个 例子 有 个 问题 。 这 个 悬 停 过 滤 按 钮 会 切换 两 个 样式 : CB 
文本 颜色 。, 但 是 我 们 写 的 过 渡 属 性 只 指定 页 过渡 背景 闫 色 。 结果 就 是 文本 一 下 子 会 由 日 色 变 成 黑 
色 ， 而 新 的 背景 颜色 则 会 慢 半 拍 才 出 现 。 

有 两 个 方法 解决 这 个 问题 。 第 一 个 办 法 是 用 逗号 作为 分 隔 符 ， 指 定 同 时 过 渡 育 景 和 文本 
颜色 : 


.slickButton ( 
































-Wwebkit-transition: background 0.5s, color 0.5s; 
-moz-transition: background 0.5s, color 0.5s; 
-o-transition: background 0.5s, color 0.5s; 


; T 
为 外 ， 还 有 一 个 更 简单 的 办 法 。 如 果 你 想 过 渡 所 有 样式 ， 而 有 旦 希望 了 折 有 过 渡 都 同步 完成 ， 可 
以 在 原来 指定 属性 名 的 地 方 指 定 all: 
-webkit-transition: all 0.5s; 


-moz-transition: all 0.5s; 
-0O=transition: all 0.5s; 








注意 HBPAGIDORGECTYAUBEDEGPB— fy. BL, -CWVAGRE4dE— AA E HRGBORGES) RU] UTE. 
比如 ， 开 始 的 时 候 慢 ， 结 来 时 加 速 ; 或 者 ， 开 始 的 时 候 快 ， 结 束 时 减速 。 如 果 过 渡 持 续 
a HAAK ARK a TR ARER, RAERD, 
TL HI 4A AU e m 其 次 ， 还 可 以 设置 延迟 ， 让 过 n 
要 了 (à 方面 的 更 多 信息 ， 请 参考 官方 规范 : http//www.w3.org/TR/css3-transitions. 
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目前 ， 支 持 过 渡 的 浏览 器 只 有 Opera 10.5, Firefox 4 和 Safari 及 Chrome 的 所 有 版 本 。Internet 
Explorer 还 不 支持 过 渡 ( 尽管 IE10 计 划 支 持 ) 不 过 ， 即 使 浏览 姻 不 支持 过 渡 好 像 也 问题 不 大 。 
为 就 算 和 忽略 过 渡 属 性 , 效 采 还 是 有 的 , 只 不 过 是 突然 切换 , 而 不 是 平滑 地 过 渡 了 。 这 还 是 不 错 的 ， 
因为 这 意味 看 网 站 可 以 添加 过 渡 功 能 ， 但 同时 又 可 以 为 旧版 本 训 览 融 提 供 基 本 不 变 的 样式 。 


8.5.2 ”更 多 的 过 渡 思 路 


利用 CSS 过 渡 把 简单 的 颜色 过 渡 提 升 到 精致 的 程度 已 经 不 错 了 。 可 是 ， 如 果 你 想 做 出 更 加 好 
玩 的 翻转 按钮 或 菜单 ， 那 么 可 以 考虑 更 多 可 以 过 渡 的 属性 。 以 下 是 一 些 还 算 不 错 的 建议 。 
口 透明 度 。 通 过 修改 opacity 属 性 ， 可 以 实现 图 像 的 淡 入 淡出 。 只 是 要 记 住 ， 别 把 图 像 变 得 
完全 透明 ， 否 则 访客 根本 不 知道 图 像 在 哪 。 
O 阴影 。 前 面 8.4.4 市 已 经 介绍 了 box-shadow 属 性 , 通过 它 可 以 为 任何 盒子 元 系 添 加 阴影 。 而 
且 合 适 的 阴影 也 可 以 制作 出 深 亮 的 悬 俘 效 果 。 特 别 是 没有 侦 移 但 有 模糊 的 阴影 ， 可 以 用 
来 生成 经 典 的 发 光 效 末 。 当 然 ， 利 用 inset 阴 影 也 可 以 做 出 内 发 光 来 。 
口 渐变 。 把 线性 渐变 改 成 放射 性 新 变 一 一 不 管 怎么 说 ， 这 种 效果 都 不 容错 过 。 
口 变形 。 下 一 下 将 会 介绍 ， 利 用 变形 可 以 移动 元 素 、 调 整 元 系 大 小 ， 甚 至 可 以 对 元 系 任 意 
变形 。 这 些 效 采 当 然 也 是 过 渡 的 首选 。 
另外 ， 对 内 边 距 (padding )、 外 边 距 〈margin ) 和 字体 大 小 ( font-size ) 应 用 过 渡 不 值得 考 
虑 。 这 些 过 渡 操 作 会 耗费 更 多 电量 ( 因为 浏览 器 要 重新 计算 布局 大 小 或 文本 提示 )， 而 且 可 能 
致 啊 应 玉 顿 和 卡 壳 。 如 采 你 想 移 动 、 放 大 或 缩小 元 素 , 那么 最 好 还 是 使 用 接 下 来 介绍 的 变形 技术 。 


















































8.5.3 ”变换 


在 讨论 画布 的 时 候 ， 我 们 也 学 习 过 变换 (transform )。 变 换 包 括 移动 、 缩 放 、 笠 切 和 旋转 。 
在 画布 中 ， 我 们 利用 变换 来 改变 绘制 的 形状 。 而 利用 CSS3 变 换 ， 则 可 以 改变 元 系 的 外 观 。 与 过 
渡 类 似 ， 变 换 也 是 一 个 新 的 、 试 验 性 的 功能 。 要 使 用 变换 ， 需 要 逐个 写 出 种 前 级 的 transform 属 
性 。 下 面 是 一 个 旋转 元 系 及 其 内 容 的 例子 : 


.rotatedElement { 
-moz-transform: rotate(45deg); 
-webkit-transform: rotate(45deg); 
-o-transform: rotate(45deg); 


} 














不 要 抛弃 老 版 本 浏览 器 
我 们 知道 ， 不 支持 过 渡 的 浏览 器 会 突然 切换 样式 ,但 这 还 是 不 错 的 。 可是， 如果 你 使 用 了 
装饰 性 的 CSS3 样式 ( 比如 带 阴影 或 渐变 的 按钮 ), 那么 老 版 本 的 浏览 器 则 会 完全 忽略 这 些 样式 。 
这 样 就 不 太 好 了 。 这 意味 着 使 用 老 浏 览 器 的 访客 根本 看 不 到 饼 标 是 停 的 效果 。 
解决 这 个 问题 的 办 法 就 是 使 用 老 浏览 器 支持 的 后 备 样式 。 比 如 ,可 以 创建 一 个 使 用 不 同 普 
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景 顾 色 的 后 备 基 停 规 则 ,然后 再 为 基 停 规则 设置 渐变 。 GXGEGE—SUPNESECVSRGEEURGEAAB XGER 
背景 变化 。 而 支持 渐变 的 浏览 器 则 会 切换 到 渐变 填充 状态 。 要 想 实 现 更 精确 的 控制 ， 可 以 考虑 
Modernizr， 这 样 就 能 为 老 版 本 浏览 器 添加 完全 不 同 的 样式 (参见 8.1.3 节 )。 


在 前 面 的 例子 中 ， 我 们 使 用 rotate() 国 数 把 元 素 于 绕 其 中 心 点 旋转 了 45 度 。 不 过 ， 还 有 很 多 
变换 函数 ， 可 以 使 单独 使 用 ， 也 可 以 结合 使 用 。 比 如 ， 下 面 的 例子 就 连续 使 用 了 三 种 变换 效果 : 
先 把 元 系 增 大 一 半 使 用 scale 变 换 )， 再 癌 左 移动 10 个 像素 (使 用 scaleX 变 换 )， 然 后 又 斜 切 了 
10°. (使 用 skew 变 换 ): 


.rotatedElement { 
-moz-transform: scale(1.5) scaleX(10px) skew(10deg); 
-webkit-transform: scale(1.5) scaleX(10px) skew(10deg); 
-o-transform: scale(1.5) scaleX(10px) skew(10deg); 





注意 dE LEN €. WAF, A-RA IEAI, wu ARR ARIE È d$) 
部 用 力 推 向 一 侧 ， 而 底部 还 固定 不 动 (结果 就 变 成 了 平行 四 边 形 ) XROY UR A CEA AK 
的 更 多 功能 ,可 以 参考 Firefox 的 帮助 文档 :http://tinyurl.com/6ger2wp。 不 过 ,要 想 在 Chrome 
和 Opera 中 试验 其 中 的 例子 ,一 定 记 住 加 前 级 。 








变换 不 会 影响 页 面 中 的 其 他 元 系 ， 也 不 会 影响 布局 。 例 如， 通过 变换 放大 攻 个 元 素 ， 奢 么 该 
元 条 会 们 单 地 和 覆盖 相 邻 元 系 。 
变换 和 过 渡 可 以 说 是 天 生 一 对 。 假 设 你 想 创建 一 个 在 线 的 数字 影集 ， 如 图 8-16 所 示 。 

















r 


图 8-16: 在 这 个 影集 中 ， 
鼠标 悬 停 后 的 变换 效果 
让 图 片 感觉 跳 了 出 来 
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这 个 例子 的 基本 标记 是 很 简单 的 ， 就 是 在 一 个 <div> 中 放 入 一 堆 图 厂 : 
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«div class-"gallery"» 
«img STC= bunny.jpg > 
«img STC= Cat.jpg > 
«img STC= dog.jpg > 
«img src-"platypus.jpg > 
«img src-"goose.jpg > 
«/div» 


以 下 是 为 容纳 图 片 的 <div> 元 素 应 用 的 样式 : 


.gallery { 
margin: Opx 30px Opx 30px; 
background: #D8EEFE; 
padding: 10px; 











下 面 则 是 为 每 个 cimg> 元 素 应 用 的 初始 样式 : 


.gallery img 1 
margin: 5px; 
padding: 5px; 
width: 75px; 
border: solid 1px black; 
background: white; 








注意 ,这 里 为 每 个 图 片 都 设置 相同 的 冤 度 (使 用 width 属 性 这 是 因为 根据 例子 的 需要 ， 必 
须 在 显示 图 片 时 , 显示 较 大 图 片 的 缩小 版 。 换 句 话 说 , 这样 浏览 硕 在 通过 变换 放大 图 片 时 才 有 余 
地 。 如 果 这 里 不 是 给 大 图 片 设置 小 一 点 的 尺寸 , 而 是 统一 显示 缉 上 略图 大 小 的 图 片 ， 那 它们 放大 后 
就 会 模糊 不 消 了。 

接 下 来 做 悬 停 效 朱 。 当 用 户 鼠 标 移 动 到 图 片上 时 ， 浏 览 硕 应 该 旋转 并 稍微 放大 一 点 图 片 : 


.gallery img:hover 1 
-webkit-transform: scale(2.2) rotate(10deg); 
-moz-transform: scale(2.2) rotate(10deg); 
-o-transform: scale(2.2) rotate(10deg); 


这 样 就 可 以 通过 变换 把 图 片 放 大 到 新 信 寸 并 旋转 一 定 角 度 。 而 为 了 让 这 个 效 末 看 起 来 看 目 然 
流畅 ， 还 可 以 在 正常 状态 下 定义 一 个 针对 所 有 样式 的 过 渡 : 


.gallery img { 
margin: 5px; 
padding: 5px; 
width: 75px; 
border: solid 1px black; 
-webkit-transition: all 1s; 
-moz-transition: all 1s; 
-o-transition: all 1s; 
background: white; 


} 
好 了 ， 鼠 标 悬 停 时 ， 图 斤 的 旋转 和 增 大 会 在 1 秒 钟 内 完成 。 而 鼠标 离开 时 ， 图 片 又 会 收 振 并 
回 到 原 位 ， 同 样 还 是 用 1 秒 钟 时 间 。 
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未 来 的 CSS 效 果 
说 实话 , 我 们 这 一 章 展 示 的 变换 和 过 渡 示 例 只 涉及 了 这 两 个 功能 的 一 点 皮毛 。 虽 然 这 些 功 
能 还 远 远 没有 最 终 定案 ， 但 利用 一 些 试验 性 的 功能 ， 还 可 以 进一步 扩展 它们 。 
3D 变 换 。 如 果 你 党 得 在 二 维 平 面 中 移动 元 素 有 点 审美 疫 务 了， 那么 可 以 试 试 3D 变 换 ， 
在 三 维 空间 里 实现 移动 、 旋 转 和 变形 。Safari 浏 览 器 的 开发 人 员 对 此 有 简单 说 明 : 
http://www.webkit.org/blog/386/3d-transforms/ ; 
O zJ]iB], E 3j , 33: 2E E SCIRC T- f] 3E 35 — — X. ERRAT A P SUERTE hover 
4 3& ) 或 焦点 切换 (使 用 :focus 伪 类 ) 动画 进一步 扩展 了 过 渡 ,让 我 们 可 通过 JavaScript 
事件 来 动态 应 用 过 渡 效 果 。 比 如 ， 可 以 在 用 户 单 击 按钮 时 实现 旋转 效果 。 更 多 信息 可 以 
参考 动画 规范 : http:/www.w3.org/TR/css3-animations/。 
O JavaScript 毛 毛 雨 。 用 一 点 点 JavaScript 来 动态 应 用 或 撤销 样式 ， 可 以 实现 复杂 的 用 户 界 
面 区 块 ， 比 如 3D 图 像 传 送 带 或 可 折 有 登 的 面板 组 ( 即 可 折 登 控件 )。 要 学 习 一 些 例 子 ， 可 
以 W Vl] http://css3.bradshawenterprises.com/. 
目前 ， 这 些 功 能 都 还 不 值得 费力 去 应 用 。 首 先 ， 它 们 需要 使 用 开发 商 前 级 ， 很 容易 出 错 ， 
因此 必须 在 所 有 主流 浏览 器 中 测试 。 其 次 , 很 多 最 新 的 浏览 器 还 不 支持 它们 。 比 如 动画 就 没有 
得 到 EE 或 ( 本 书写 作 时 的 ) Opera 任 何 版 本 、Firefox 4 的 支持 。 而 要 没 着 相同 的 思路 变通 ， 还 
不 如 另起炉灶 更 简单 。 
今天 ， 实 现 动画 效果 最 具 可 行 性 的 方案 是 jQuery UI 或 MooTools 等 JavaScript 库 。 但 很 明显 ， 
CSS3 才 是 网 页 效果 的 未 来 。 所 以 ， 我 们 希望 该 标准 早日 尘埃 落 定 ， 而 现代 浏览 器 也 尽快 进入 
SERIE S 
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Wen 中 的 数据 可 以 保存 到 两 个 地 方 , — "T EWebllkr4&, —"P 4E Webs Pm (用 户 的 
计算 机 )。 这 两 个 地 方 各 目 都 有 适合 保存 的 数据 。 

Web 服 务 需 适合 保存 敏感 信息 ， 以 及 那些 你 不 硕 望 被 别人 算 改 的 数据 。 比 如 ， 在 网 上 书店 里 
购书 时 ， 所 有 交易 信息 都 会 保存 到 Web 服 务 礁 上。 你 目 己 计算 机 中 保存 的 数据 只 有 那么 一 丁点 ， 
书店 网 站 要 用 该 数据 判断 你 是 谁 ( 这 样 才能 知道 哪个 购物 车 是 你 的 )。 即 使 有 了 HTML5， 这 种 套 
路 也 不 能 改变 一 一 服务 需 安 全 、 可 靠 、 高 效 。 

然而 ， 服 务 融 端 存 储 也 并 非 适 合 所 有 网 站 。 有 时 候 ,， 把 一 些 不 太 重 要 的 信息 放 在 用 户 计算 机 
上 相对 会 更 方便 。 比 如 ， 把 用 户 偏 好 ( 影 啊 网 页 显示 方式 的 设置 ) 和 应 用 状态 (相当 于 Web 应 用 
某 个 瞬间 的 快照 ， 保 存 后 可 以 方便 用 户 将 来 返回 该 状态 ) 放 在 用 户 本 地 就 比较 合乎 情理 。 

在 HIMLS 之 前 ， 本 地 存储 的 唯一 方案 就 是 使 用 cookie。 而 最 初 发 明 cookie 的 目的 ， 是 为 了 在 
浏览 器 和 服务 器 之 间 传 送 身份 信息 。 利 用 cookie 保 存 少 量 数 据 绝 对 方便 ， 可 是 操作 它们 的 
JavaScript 语 法 多 少 有 点 不 够 人 性 化 。 但 cookie 也 有 不 好 的 一 面 ， 那 就 是 必须 处 理 过 期 数据 ， 而 且 
要 跟着 每 一 次 请 求 来 来 回回 地 发 送 和 接收 这 些 没 有 用 的 数据 。 

HTML5 新 增 了 更 好 的 本 地 存储 功能 ， 让 我 们 在 访客 的 计算 机 上 保存 数据 更 加 方便 。 这 些 数 
据 可 以 无 限期 地 保存 在 用 户 计算 机 上 ， 不 会 发 送 到 服务 硕 〈 除非 你 目 己 发 送 )， 有 充裕 的 空间 存 
储 它 们 ， 而 且 能 够 通过 几 个 简单 的 JavaScript 对 象 对 它们 进行 操作 。 这 个 叫做 Web 存 储 〈Web 
Storage ) 的 新 功能 特别 适合 开发 离线 应 用 ( 离线 应 用 将 在 第 10 革 讨论 ) 离线 应 用 的 数据 可 以 “ 目 
给 自足 ”， 无 论 用 户 能 否 上 网 ， 都 可 以 在 本 地 保存 用 户 信息 。 

本 草 将 市 领 大 家 探索 Web 存 储 功 能 的 各 个 方面 。 另 外 ， 还 会 介绍 一 个 更 新 的 标准 ， 文 持 该 标 
准 的 浏览 硕 能 够 从 计算 机 硬盘 的 其 他 文件 中 旋 取 数据 。 























9.1 Web 存储 简介 


HTML5 的 这 个 Web 存 储 功 能 , 其 实 就 是 让 网 页 在 用 户 计算 机 上 保存 一 些 信息 。 这 些 信 息 可 以 
是 临时 的 (浏览 瘟 一 关 ， 避 C 目 动 删 除 )， 也 可 以 是 长 期 的 ( 多少 天 之 后 再 打开 网 站 ,仍然 可 以 访 
问 它们 )。 
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注意 ”Web 存储 这 个 名 字 误 人 不 浅 啊 ， 本 来 网 页 保存 的 信息 根本 就 不 在 Web (网 E, m X 
实在 在 地 保存 在 用 户 的 计算 机 上 ， 从 来 不 会 离开 。 





Web 存 储 又 分 两 种 ， 分 别 对 应 两 个 JavaScript 对 象 。 

O 本 地 存储 ， 对 应 localStorage 对 象 ， 用 于 长 期 保存 整个 网 站 的 数据 。 也 就 是 说 ， 如 果 有 一 
个 网 页 利用 本 地 存储 保存 了 数据 ， 那 么 访客 在 一 天 后 、 一 星期 后 ， 甚 至 一 年 之 后 再 上 线 ， 
该 数据 仍然 还 会 在 那儿 。 当 然 ， 多 数 训 览 规 都 会 提供 一 种 机 制 ， 证 用 户 可 以 清除 本 地 存 
储 空间 中 的 数据 。 有 些 浏览 郝 只 提供 一 个 命令 ， 要 么 一 点 不 能 删 ， 要 删 承 全 都 删除 ， 就 
跟 过 去 清除 cookie 的 方法 一 样 。( 事实 上 , 某 些 浏览 硕 的 实现 是 将 本 地 存储 和 cookie 放 在 一 
起 的 ， 因 此 要 清除 本 地 存储 数据 必须 清除 cookie。) 男 一 些 浏览 器 会 让 用 户 按 照 站 点 检查 
数据 ， 然 后 有 选择 地 清除 本 地 存储 的 数据 。 

OQ 会 话 存 储 ， 对 应 sessionStorage 对 象 ， 用 于 临时 保存 针对 一 个 窗口 (或 标签 页 ) 的 数据 。 
在 访客 关闭 窗口 或 标签 页 之 前 ， 这 些 数据 是 存在 的 ， 而 关闭 之 后 就 会 被 浏览 各 删 际 。 不 
过 ， 只 要 用 户 不 关闭 窗口 或 标签 页 ， 就算 他 从 你 的 网 站 跑 到 人 家 的 网 站 然后 义 回来 ， 这 
些 数 据 还 会 在 。 














提示 从 页 面 代码 的 角度 说 ， 本 地 存储 和 会 话 存储 的 操作 完全 相同 。 它 们 的 区 别 仅 在 于 数据 的 
寿命 。 本 地 存储 主要 用 于 保存 访客 将 来 还 能 看 到 的 数据 ， 而 会 话 存储 则 用 于 保存 那些 需 
要 从 一 个 页 面 传 递 给 下 一 个 页 面 的 数据 。( 当然 ， 使 用 会 话 存储 也 可 以 保存 只 在 一 个 页 
面 中 使 用 的 数据 , 但 这 个 任务 就 算 普 通 的 JavaScript 变 量 也 绝对 可 以 胜任 ,又 何必 多 此 一 
举 呢 。) 


无 论 本 地 存储 还 是 会 话 存 储 , 都 是 与 网 站 所 在 的 域 联系 在 一 起 的 。 换 句 话 说， 如果 利 用 本 地 
存储 保存 数据 的 页 面 是 www.GoatsCanFloat.org/game/zapperhtmnl , JB A 53 — ^ 9i rfi 
www.GoatsCanFloat.org/contact.html 也 可 以 访问 该 数据 ， 为 这 两 个 页 面 在 同一 个 域 中 
( www.GoatsCanFloat.org )。 如 有 果 是 男 一 个 不 同 网 站 的 页 面 ， 就 不 能 访问 该 数据 了 。 

同样 ， 由 于 数据 保存 在 用 户 的 计算 机 上 (或 移动 设备 上 )， 这 些 数 据 也 是 跟 计 算 机 绑 定 的 ; 
网 页 不 能 访问 保存 在 其 他 用 户 计 算 机 上 的 数据 。 类 似 地 ,如 采 你 用 不 同 的 用 户 名 登录 目 己 的 计算 
机 ， 或 者 使 用 不 同 的 浏览 需 ， 那 么 存 取 的 也 将 是 不 同 的 本 地 存储 数据 。 




















注意 ”尽管 HTMLS 没 有 硬性 规定 存储 空间 的 上 限 ， 但 大 多 数 浏览 器 都 把 本 地 存储 限制 为 5S MB 
以 下 。 这 已 经 足够 保存 很 多 数据 了 ,但 如 果 你 想 利 用 本 地 存储 来 缓存 大 图 片 或 视频 文件 ， 
丽 怕 这 个 限制 会 让 你 捉襟见肘 ( 毕竟 ， 这 也 不 是 设计 本 地 存储 的 目的 )。 假 如 你 需要 更 大 
的 空间 ， 可 以 考虑 尚未 定案 的 IndexedDB 数 据 库 标准 (参见 9.3.6 节 的 附注 栏 )。IndexedDB 
的 起 始 空间 就 是 S0 MB， 如 果 用 户 同意 还 可 以 扩展 。 
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9.1.1 存储 数据 








要 把 一 段 信息 保存 到 本 地 存储 或 会 话 存 储 中 ,首先 要 为 该 信息 想 一 个 名 子 。 这 个 名 字 叫 做 键 ， 





将 来 要 通过 它 来 取 回 数据 。 


存储 数据 的 语法 如 下 : 

localStorage[keyName] = data; 

举 个 例子 ， 假 设 你 想 保 存 用 户 名 ， 那 么 这 个 键 束 可 以 叫做 user_name: 
localStorage["user name"] = "Marky Mark"; 


当然 ， 像 这 样 保 存 便 编码 的 数据 没有 多 大 意思 。 更 多 情况 下 ， 可 以 保存 动态 数据 ， 比 如 当前 

















日 期 、 数 学 计算 的 绪 采 ， 或 者 用 户 在 文本 框 中 输入 的 菏 些 文本 ， 等 等 。 下 面 就 是 一 个 保存 动态 数 
据 的 例子 : 


// 取 得 文本 框 
var nameInput = document.getElementById("userName"); 


// 保 存 文本 框 中 的 文本 


localStorage["user name "] = nameInput.value; 


谈 取 本 地 存储 中 的 数据 跟 保 存 数 据 一 样 简单 .例如 ,下面 这 行 代 码 会 读 出 前 面 保存 的 用 户 名 ， 








然后 通过 警告 框 显示 出 来 : 


E 
AE 


何等 于 null。 请 看 下 面 的 例子 : 


alert("You stored: ”+ localStorage["user name"]); 
无 论 这 个 名 字 是 $ 秒 钟 前 保存 的 ， 还 是 5 分 钟 前 保存 的 ， 这 行 代 码 都 管用 。 
当然 , 有 可 能 这 个 键 下 面 尚未 保存 任何 数据 。 要 检测 某 个 键 的 值 是 否 为 空 ， 可 以 耳 接 测试 它 





if (localStorage["user name"] == null) { 
alert ("You haven't entered a name yet."); 


else { 


// 把 用 户 名 放 到 文本 框 中 
document .getElementById("userName").value = localStorage["user name"]; 


} 
会 话 存储 也 一 样 简 单 。 唯 一 的 区 别 是 要 使 用 sessionSstorage 对 象 ， 而 不 是 localStorage 
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// 取 得 当前 日 期 
var today = new Date( 


// 以 文本 形式 保存 格式 为 HH:mm 的 时 间 
sessionStorage["lastUpdateTime"] = today.getHours() + ":" + today.get- 
Minutes(); 


图 9-1 展 示 了 一 个 页 面 ， 利 用 了 刚才 介绍 的 这 些 概念 。 
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图 9-1: 页 面 中 有 两 个 文 
E O [E CAHTMLS\ Chapter 09AWebStorageihtmi PP->x| 全 安 意 | 本 框 ， 一 个 针对 会 话 存 
| Read Tet L 储 ， 另 一 个 针对 本 地 存 
WEB STORAGE 储 。 单 击 Save Data, D 
This goes into local 面 会 保存 方 框 中 的 值 。 
storage: 再 单 击 Load Data, b 
把 刚才 保存 的 数据 读 回 








This goes into 


session storage: Ko 要 测试 这 个 页 面 ( 同 
时 验证 会 话 存 储 中 的 数 

( Save Data | | Load Data | 据 会 在 关闭 窗口 后 消 
失 ， 而 本 地 存储 中 的 数 

据 则 会 长 期 存在 ) ， 可 

以 运 行 www.prosetech. 

conmy/html5 中 的 这 个 页 面 














注意 ”Web 存储 还 支持 以 属性 方式 读 写 数据 ,但 不 太 常 用 。 在 使 用 这 种 语法 时 ， 读 取 键 为 user 
name 的 数据 段 ， 妥 使 用 localStorage.user name， 而 不 是 localStorage[ "user name"]。 当 
然 ， 两 种 语法 都 可 以 ， 具 体 使 用 哪 种 ， 就 看 你 自己 了 。 


没有 Web 服 务 器 则 不 能 使 用 Web 存 储 

在 测试 Web 存储 时 ， 可 能 会 遇 到 一 个 意 想不到 的 问题 。 在 很 多 浏览 器 中 ， 只 有 从 Web 服 
务 器 上 打开 的 页 面 才 能 读 写 Web 存储 。 无 论 这 个 Web 服务 器 是 远程 的 还 是 本 地 的 一 一 关键 就 
是 不 能 从 本 地 硬盘 打开 页 面 。 

这 个 问题 的 根源 在 于 浏览 器 要 限制 Web 存储 的 空间 大 小 。 如 前 所 述 ， 每 个 网 站 的 存储 
上 限 是 3 MB。 为 了 达到 这 一 目的 ， 就 必须 把 每 个 使 用 本 地 存储 的 页 面 与 一 个 网 站 ( 域 ) X 
联 起 来 。 

那 如 果 我 就 是 从 本 地 硬盘 打开 一 个 使 用 Web 存储 的 页 面 ， 结 果 会 怎么 样 ? 结果 要 视 情 况 
mÆ , 4£ Internet Explorer 中 ,浏览 器 好 像 会 完全 不 支持 Web 存储 功能 一 样 。 因 为 ,1ocalStorage 
fe sessionStorage 对 象 不 见 了 ,访问 它们 的 JavaScript 代码 会 报错 ,在 Firefox 中 , localStorage 
和 sessionStorage 对 象 还 在 ， 似 乎 还 支持 Web 存储 ( 即使 Modernizr 也 会 认为 支持 )， 但 任何 
读 写 操作 都 会 静默 地 失败 。 而 在 Chrome F, 结果 又 不 一 样 一 一 大 多 数 Web 存储 的 功能 一 如 既 
往 ， 只 有 少数 功能 (如 onStorage 事件 ) 无 效 。 在 使 用 File API 的 时 候 (9.3 节 会 介绍 )， 也 会 
遇 到 类 似 的 问题 。 因 此 ， 在 测试 之 前 最 好 先 把 页 面 放 到 你 自己 的 Web 服务 器 中 ， 从 而 避免 意 
外 发 生 。 要 不 ， 直 接 运 行 www.prosetech.com/html5 中 的 页 面 也 可 以 。 
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9.1.2 ”实战 : 保存 游戏 中 的 最 后 位 置 


此 时 此 刻 , 或 许 你 会 想 : Web 存 储 不 过 如 此 啊 ， 也 就 是 能 用 方 括 号 语 法 记录 人 名 而 已 。 你 说 
的 没 错 。 但 Web 存 储 还 有 更 实际 的 用 途 ， 而 有 旦 照样 不 必 多 费力 气 。 

以 我 们 第 7 章 讲 画布 时 介绍 的 迷宫 游戏 为 例 ( 057.515 )。 要 想 一 次 就 走出 迷宫 并 不 容易 ， 所 
以 有 必要 在 用 户 关 闭 窗 口 或 打开 新 页 面 时 记录 当前 位 置 。 这样， 用户 再 回来 迷宫 页 面 后 ,就 可 以 
把 笑脸 图 标 放 在 上 一 次 的 位 置 上 。 

要 实现 这 个 功能 ， 有 几 种 方案 可 以 选择 。 可 以 每 移动 一 次 就 保存 一 次 新 位 置 。 本 地 存储 的 速 
度 非常 快 ， 因 此 这 样 做 没有 问题 。 或 者 ， 可 以 啊 应 页 面 的 onBeforeUnload 事 件 ， 询 问 游戏 玩家 是 
否 要 保存 当前 位 置 ( 如 图 9-2 所 示 )。 




















图 9-2: 在 玩家 因为 要 打开 新 页 面 或 关闭 


[| Canvas Maze Game 中 


€ > QC Olocalhost/Maze.html 窗 口 而 离开 当 前 页 面 时 , 页 面 建议 保存 
”当前 位 置 





以 下 就 是 实现 页 面 建议 保存 位 置 的 代码 : 
window.onbeforeunload = function(e) { 
/ [tl FKocalStoragex] $& X FAA 
// (如 果 浏 览 器 不 支持 Meb 存 储 ， 还 怎么 保存 ? ) 
if (localStorage) ( 


// 询 问 是 否 保存 位 置 


if (confirm( 
"Do you want to save your current position in the maze, for next time?")) { 
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// 保 存 两 个 坐标 值 
localStorage["mazeGame currentX"] 
localStorage["mazeGame currentY"] 


提示 “建议 你 也 像 这 个 例子 一 样 选 择 长 键 名 ( 如 mazeGame currentX ), 因为 必须 保证 键 名 的 唯一 性 ， 
这 样 网 站 的 两 个 页 面 就 不 会 意外 地 使 用 同一 个 键 保存 不 同 的 数据 。 在 只 有 一 个 存储 空间 的 
系统 中 ， 很 容易 发 生命 名 冲突 ， 而 这 也 正 是 Web 存 储 的 一 个 弱点 。 为 了 避免 这 个 问题 ， 最 
好 提前 做 个 规划 ， 选 择 一 种 有 逻辑 性 、 能 自 解释 的 键 名 命名 方案 。 例 如 ， 假 设 另 一 个 页 面 
也 有 一 个 迷宫 游戏 ， 那 么 可 以 考虑 将 页 面 名 也 放 到 键 名 中 ， 比 如 Maze01 currentX, 








这 样 ， 当 下 次 再 打开 迷 宣 游戏 页 面 时 ， 就 可 以 检查 该 信息 是 否 存 在 : 


// 支 持 本 地 存储 功能 吗 ? 

if (localStorage) { 
// 取 得 数据 
var savedX = localStorage["mazeGame currentX"]; 
var savedY = localStorage["mazeGame currentY"]; 


// 如 果 变 量 为 U11， 则 说 明 没 有 保存 的 数据 
// 否 则 ， 用 保存 的 数据 设置 新 坐标 

if (savedX != null) x = Number(savedX); 
if (savedY !- null) y = Number(savedY); 


j 

这 个 例子 展示 了 如 何 保 存 应 用 状态 。 如 果 你 不 想 让 用 户 每 次 离开 游戏 页 面部 看 到 同样 的 提示 
消息 ， 可 以 添加 一 个 “ 目 动 保存 位 置 ” 复 选 框 。 然 后 ， 只 要 用 户 勾 选 复 选 框 就 保存 位 置信 息 。 当 
然 ， 你 还 得 多 保存 一 个 复 选 框 的 值 ， 而 这 也 就 是 保存 应 用 偏好 的 例子 了 。 

x TRI T8 H] Y JavaScript) Number () KZ, 用 于 把 保存 的 数据 转换 为 有 效 的 数值 。9.2.3 市 会 
进一步 介绍 这 样 做 的 必要 性 。 


9.1.3 浏览 器 对 Web 存 储 的 支持 情况 
Web 存 储 是 支持 情况 比较 好 的 HTML5 功 能 , 所 有 现代 浏览 器 都 支持 它 。 表 9-1 列 出 了 支持 Web 
存储 的 浏览 器 及 最 低 版 本 号 。 


39-1 文 持 本 地 存储 和 会 话 存储 的 浏览 器 
IE Firefox Chrome Safari Opera Safari iOS Android 
最 低 版 本 8 3.5 5 4 10.5 2 2 


这 些 浏览 需 都 支持 本 地 存储 和 会 话 存储 。 但 它们 对 onStorage 事 件 〈9.2.5 万 将 会 介绍 的 一 个 
不 太 常 用 的 功能 ) 的 支持 则 是 最 近 的 事 儿 。IE9、Firefox 4 和 Chrome 6 支持 这 个 事件 。 
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最 大 的 问题 是 IE7， 因 为 它 根 本 不 文 持 Web 存 储 。 而 要 解雇 这 个 问题 ， 可 以 用 cookie 来 模拟 
Web 人 存储。 虽然 不 完美 ， 但 却 可 行 。 虽 然 没 有 官方 的 脚本 可 以 帮 你 实现 模拟 ， 但 在 GitHub“ 肛 子 
脚本 ”页 面 ( http://tinyurl.com/polyfill) 的 “Web Storage” 部 分 ， 还 是 可 以 找到 不 少 有 用 的 东西 。 


9.2 RA Web 存储 

现在 我 们 已 经 营 握 了 Web 存 人 备 的 基础 知识 ， 包 括 你 存 和 读 取 数据 。 可 是 ， 在 学 以 致 用 之 前 ， 
还 有 一 些 重要 的 知识 点 以 及 有 用 的 技术 需要 再 午 握 一 下 。 接 下 来 的 几 市 会 介绍 蚊 么 从 Web 和 存储 中 
删除 数据 项 ， 怎 么 检索 当前 保存 的 所 有 数据 。 另 外 , 还 会 介绍 如 何 处 理 不 同 的 数据 类 型 、 保 存 目 
定义 对 象 和 啊 应 存储 数据 变化 。 


9.2.1 删除 数据 项 


这 个 任务 已 经 简单 得 不 可 能 再 简单。 只 要 调用 removeItem() 方 法 ， 传 入 键 名 ， 束 可 以 删除 
不 想 要 的 数据 项 : 
localStorage.removeltem("user name"); 


要 不 然 ， 就 调用 更 历 害 的 clear() 方 法 ,清空 网 站 在 本 地 你 存 的 会 话 数 据 : 


sessionStorage.clear(); 








9.2/2 ”查找 所 有 数据 项 


要 搜索 肝 一 个 数据 项 ， 只 要 知道 键 名 即 可 。 但 这 里 会 再 告诉 你 一 个 更 有 意思 的 技巧: ANDR 
道 任何 键 名 ,使 用 key() 方 法 从 本 地 或 会 话 存 储 中 取得 ( 当前 网 站 保存 的 ) 所 有 数据 项 。 这 个 技 
巧 非 第 适合 调试 排 错 。 当 然 如 来 你 想 知 道 其 他 页 面部 保存 了 哪些 数据 , 或 者 都 使 用 了 什么 样 的 键 
名 ， 也 可 以 使 用 它 。 

图 9-3 展 示 了 一 个 实际 使 用 这 个 技巧 的 例子 。 








E22 eola) 图 9-3: 单 击 按钮 ， 页 面 中 就 会 列 出 本 地 存储 中 的 
| DD Find All Items |+] * 


e | http://localhost/FindAllitems.html ~ e| 会 E- | 


Dump the contents of Local Storage 





Taa 








è user name: Fabulous Bob 

* mazeGame currentY: 5 

* save position automatically: true 
è mazeGame currentX: 268 
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TEX PIT P, FRdrEHLESTU TfindAllItems ()PRZ, ARIN D] A Hu ER BS ds 
项 ， 其 代码 如 下 : 
function findAllItems() { 


// 取 得 用 于 保存 数据 项 的 <uL> 元 素 
var itemList = document.getFlementById("itemList"); 


// 清 除 列 表 
itemList.innerHTML = ""; 


// 遍 历 所 有 数据 项 
for (var i-0; i«localStorage.length; i++) { 


// 取 得 当前 位 置 数据 项 的 键 
var key = localStorage.key(i); 


// 取 得 以 该 键 保存 的 数据 值 
var item = localStoragel[key]; 


// 用 以 上 数据 创建 一 个 列表 项 
// 添 加 到 页 面 中 
var newItem = document.createElement("li"); 
newItem.innerHTML = key + : " + item; 
itemList.appendChild(newItem); 
j 
l 


9.2.3 ”保存 效 值 和 日 期 


到 目前 为 止 ， 我 们 还 遗漏 了 关于 Web 存 储 的 一 个 重要 细节 。 那 就 是 在 通过 localStorage 和 
sessionStorage 保 存 数 据 时 ， 该 数据 会 日 动 被 转换 为 文本 。 

对 于 本 来 就 是 文本 的 数据 ( 如 在 文本 框 中 输入 的 用 户 名 )， 这 当然 没 问题 。 但 数值 就 不 一 样 
T o 比如 9.1.2 市 的 那个 例子 , 保存 的 就 是 笑脸 图 标 当 前 的 位 置信 息 。 如 末 饼 了 把 文本 转换 成 数值 ， 
那么 束 会 碰 到 下 面 所 示 的 问题 : 

// 取 得 X 坐 标 


// 假 设 保 存 为 文本 "35" 
x = localStoragel "mazeGame currentX"|; 


// 给 坐标 加 上 一 个 数值 
// 然 而 ，]avaScTipt 会 把 "35"+"5" 转 换 成 "355" 
X += 5j 


这 显然 不 是 你 想 要 的 结果 。 因 为 这 会 导致 笑脸 跳 到 一 个 错误 的 位 置 上 ， 甚 至 会 跳出 迷 富 。 

问题 在 于 ,JavaScript 认 为 你 是 想 把 两 段 文 本 拼 起 来 , 而 不 是 要 执行 数学 计算 。 要 解决 这 个 问 
题 , 就 需要 给 JavaScript 一 个 提示 , 告诉 它 你 想 计算 两 个 数值 的 加 法 。 办 法 有 很 多 , 但 使 用 Number() 
函数 就 很 好 : 


x = Number(localStorage[" mazeGame currentX" ]); 























// 这 样 ，JavaScript 就 可 以 正确 地 计算 35+15， 返 回 40 
X += 5; 
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文本 和 数值 还 算 容 易 处 理 的 。 如 果 你 想 在 Web 存 储 中 保存 其 他 类 型 的 数据 ， 就 要 多 加 留意 。 
有 些 数据 类 型 有 方便 的 转换 方法 。 比 如 ， 像 下 面 这 样 保存 日 期 : 


var today = new Date(); 


结果 并 不 会 保存 日 期 对 象 ， 而 是 会 保存 一 个 文本 字符 串 。 比 如 Sat Jun 09 2011 13:30:46. 
可 是 , 要 把 这 样 的 文本 转换 回 日 期 对 象 可 不 容易 。 右 没有 日 期 对 和 象 ,， 也 就 不 能 以 相同 方式 来 操作 
日 期 ， 比 如 不 能 调用 日 期 对 象 的 方法 执行 日 期 计算 。 

为 解决 这 个 问题 ,可 以 先 按照 既定 的 格式 把 日 期 转换 成 相应 的 文本 , 然后 再 根据 取得 的 文本 
创建 日 期 对 象 。 下 面 就 是 一 个 例子 : 


// 创 建 日 期 对 象 
var today = new Date(); 

















// 按 照 YYYY/MM/DD 的 标准 格式 把 日 期 转换 成 文本 字符 串 

// 然 后 保存 为 文本 

sessionStorage["session started'] = today.getFullYear() + "/" + 
today.getMonth() + "/" + today.getDate(); 


// 取 得 日 期 文本 ， 并 基于 该 文本 创建 新 的 日 期 对 象 
// 这 是 因为 文本 格式 是 有 效 的 日 期 形式 
today = new Date(sessionStorage["session started" |]); 


// 使 用 日 期 对 象 的 方法 ， 比 如 getFullYear() 
alert(today.getFullYear()); 


运行 以 上 代码 ， 会 弹出 一 个 显示 年 份 的 消息 框 ， 也 就 说 明 你 重新 创建 了 日 期 对 象 。 


9.2.4 保存 对 象 


上 一 节 介 绍 了 在 Web 存 储 中 保存 数值 和 日 期 时 会 把 它们 转换 成 文本 ， 而 将 来 使 用 时 还 要 再 转 
换 回 去 。 这 些 转 换 都 有 JavaScript 函 数 的 帮助 , 首先 是 Number() 函 数 ， 然 后 是 文本 到 日 期 转换 时 的 
一 些 技巧 , 依靠 日 期 对 象 固有 的 方法 。 然而 , 还 有 很 多 其 他 对 象 不 能 这 样 转换 ， 比 如 自 定 义 对 象 。 

比如 7.2.4 节 的 人 格 测 试 , 那个 例子 使 用 了 两 个 页 面 。 测 试 者 在 第 一 个 页 面 回 答 问题 然后 得 到 
一 个 分 数 ， 而 第 二 页 会 显示 测试 结果 。 当 时 为 在 两 个 页 面 间 传 递 数据 , 使 用 了 藤 人 在 URL 中 的 查 
询 字 符 串 参数 。 这 是 传统 HIML 中 的 做 法 〈 当然 使 用 传统 的 cookie 也 可 以 )。 但 有 了 HTMLS， 利 
用 本 地 存储 共享 数据 才 是 最 佳 方案 。 

可 是 也 有 一 个 难题 。 测 试 数据 包含 5 个 数据 ， 分 别 对 应 五 个 人 格 因素 。 当 然 ， 可 以 分 别 保存 
这 5 个 数值 ， 但 要 是 能 把 所 有 人 格 因素 保存 到 一 个 自 定 义 对 象 中 ， 岂 不 更 简单 明了 ? 为 此 我 们 可 
VIE X. —"PersonalityScoreX] Ze: 


function PersonalityScore(o0, c, e, a, n) 1 
this.openness = 0; 
this.conscientiousness = C; 
this.extraversion = e; 
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this.agreeableness = a; 
this.neuroticism = n; 


} 


定义 了 PersonalityScore 对 和 象 之 后 ， 只 要 1 个 数据 项 〈 而 非 5 个 ) 束 可 以 保存 所 有 数据 。( 关于 
自 定 义 对 象 ， 可 以 回顾 7.3.1 节 中 的 示例 。) 

为 了 把 目 定 义 对 象 保存 到 Web 存 储 中 ， 必 须 先 把 对 象 转换 成 文本 形式 。 要 目 己 写 转换 代码 ， 
那 麻烦 可 就 大 了 。 好 在 JavaScript 有 一 个 更 简单 的 、 标 准 化 的 机 制 叫 JSON 编 码 。 

JSON ( JavaScript Object Notation，JavaScript 对 象 表 示 法 ) 是 把 结构 化 数据 一 一 类 似 封 法 在 
对 象 中 的 那些 值 一 一 转换 为 文本 的 一 种 帘 便 格式 。 而 且 浏 览 硕 原生 文 择 JON 编 码 。 也 就 是 说 ， 
下 接 调 用 JSON.stringify()， 束 可 以 把 任何 对 象 连 同 其 数据 转换 为 文本 形式 。 调 用 ]SON.parse() 
则 可 以 把 文本 转换 回 对 象 。 以 下 就 是 在 测试 中 转换 PersonalityScore 对 象 的 代码 。 在 测试 者 提交 
答案 时 ， 页 面 会 计算 分 数 (但 不 显示 )， 创建 对 象 ， 保 存 它 ， 然 后 再 打开 新 页 面 : 


// 创 建 PersonalityScore 对 象 
var score = new PersonalityScore(o, C, e, a, n); 




















// 将 其 保存 为 方便 的 JSON 格 式 
sessionStore["personalityScore"] = JSON.stringify(score); 


// 转 到 结果 页 
window.location = "PersonalityTest Score.html"; 


到 新 页 面 后 ， 再 从 会 话 存储 中 取出 JSON 文 本 , 使 用 JSON.parse() 方 法 将 其 转换 回 对 象 。 以 下 
就 是 相应 的 代码 : 
//JSON 文 本 转换 为 原来 的 对 象 


var score = JSON.parse(localStorage[|"personalityScore"]); 





// 从 对 象 中 取得 数据 
l]blScoreInfo.innerHTML = "Your extraversion score is " + score.extraversion; 


要 查看 这 个 例子 的 完整 代码 , 包括 每 个 人 格 因 素 的 计算 过 程 , 请 参考 www.prosetech.comyhtml5 
中 的 页 面 。 要 了 人 解 更 多 关于 JSON 的 内 容 ， 看 看 JSON 格 式 的 数据 长 什么 样 ， 请 参考 
http://en.wikipedia.org/wiki/JSON 。 


9.2.5 ”响应 存储 变化 


Web 存 储 也 为 我 们 提供 了 在 不 同 浏览 融 窗 口 间 通信 的 机 制 。 具 体 来 说 ， 就 是 在 本 地 存储 或 会 
话 存 储 发 生变 化 时 ， 其 他 查看 同一 页 面 或 者 同一 站 点 中 其 他 页 面 的 窗口 就 会 触发 window. 
onStorage 事 件 。 因 此 ， 如 果 你 在 www.GoatsCanFloat.org/storeStuff.html 页 面 中 改变 了 本 地 存储 ， 
那么 打开 www.GoatsCanFloat.org/checkStorage.html 页 面 的 窗口 会 触发 onStorage 事 件 。( 当然 ， 必 
须 是 同一 台 计 算 机 中 相同 的 浏览 融 打 开 的 页 面 ， 这 一 点 你 已 经 知道 了 。 ) 

所 谓 存 储 变 化 ， 指 的 就 是 癌 存 储 中 添加 新 数据 项 ,修改 既 有 数据 项 ,删除 数据 项 或 清除 所 有 
数据 。 但 是 , 那些 对 存储 不 产生 任何 影 响 的 操作 〈 比如 用 既 有 的 键 名 保存 相同 的 值 ,或 者 清除 原 
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本 就 是 空 的 存储 空间 )， 不 会 引发 onStorage 事 件 。 
下 面 看 看 图 9-4 所 未 的 页 面 。 可 以 在 这 个 页 面 中 辐 本 地 存储 添加 任何 数据 项 ， 只 要 在 相应 的 
文本 杠 中 输入 键 和 值 即 可 。 保 存 新 数据 项 时 ， 第 二 个 页 面 就 会 报告 你 人 存 了 什么 。 




















图 9-4: 为 了 体验 onStorage 事 件 ， 同 时 打开 
x —— | StorageEventsl.htmlflüStorageEvents2.html, 234g 
& C © localhost/StorageEvents1.htm! 在 第 一 个 页 面 ( E 中 添加 或 修改 数据 项 时 ， 
第 二 个 页 面 ( 下 ) 会 啊 应 该 事件 ， 并 报告 结果 
( JEEP ) 


| | Storage Events V [7] Storage Events 





Locar STORAGE 


Key:  randomText 


Value: |Can anybody else read this? 
人 














| ] Storage Events d [| Storage Events b 





* QC | localhost/manitest/StorageEvents2.ht yz | M 


Local storage updated. 

Key: randomText 

Old Value: null 

New Value: Can anybody else read this? 

URL: http://localhost/manitest/StorageEvents1.html 








图 9-4 所 示 的 示例 涉及 两 个 页 面 ， 第 一 个 页 面 负责 保存 数据 。 在 这 个 页 面 中 , 单 击 Add 按 钮 会 
触发 一 个 小 函数 addValue()， 其 代码 如 下 : 


function addValue() { 


// 取 得 两 个 文本 框 中 的 值 
var key = document.getElementById("key").value; 
var item = document.getElementById("item").value; 


// 在 本 地 存储 中 保存 数据 项 


// 〈 如 果 同 名 键 已 经 存在 ， 则 用 新 值 替换 旧 值 ) 
localStorage[key] = item; 
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第 二 个 页 面 很 简单 ， 就 是 在 页 面 加载 后 为 window.onStorage 事 件 添加 一 个 处 理 函 数 ， 代 码 
如 下 : 


window.onload = function() { 


// 把 onStorage 事 件 与 storageChanged() 涵 数 联 系 起 来 
window.addEventListener("storage", storageChanged, false); 


j; 

以 上 代码 与 我 们 前 面 展 示 的 添加 事件 处 理 程 序 的 代码 有 所 不 同 。 在 此 ， 我 们 没有 设置 
window.onstorage 事 件 ， 而 是 调用 了 window.addEventListener()。 这 是 为 了 确保 代码 在 所 有 浏览 
融 中 都 能 运行 ， 而 这 样 写 是 最 简单 的 形式 。 如 果 百 接 设置 window.onstorage 事 件 ， 那 么 这 个 例子 
在 Firefox 中 就 不 能 运行 ( 因为 Firefox 的 window 对 象 没有 onstorage 属 性 )。 














注意 Web 老手 可 能 还 记得 addEventListener() 方 法 不 能 在 IE8 (或 更 早 版 本 中 ) 使 用 。 在 这 个 
例子 中 ， 其 实 不 用 考虑 这 个 问题 ， 因 为 IE8 根 本 就 不 支持 存储 事件 。 


storageChanged() 六 数 的 任务 很 和 测 单 ， 只 是 取得 更 新 的 信息 ， 然 后 通过 页 面 中 的 <div> 元 素 显 
RHR: 
function storageChanged(e) { 
var message = document.getElementById("updateMessage"); 
message.innerHTML = "Local storage updated."; 
message.innerHTML += "«br»Key: ”+ e.key; 
message.innerHTML += "«br»Old Value: ”+ e.oldValue; 
message.innerHTML += "«br»New Value: ”+ e.newValue; 
message.innerHTML += "«br»URL: ”+ e.url; 


} 

可 见 ，onStorage 事 件 提供 了 不 少 信息 ， 包 括 发 生变 化 的 键 和 值 、 原 来 的 值 (oldValue )、 新 
值 ( newValue ) 和 导致 此 次 变化 的 页 面 URL。 如 果 onstorage 事 件 反 映 的 是 插入 新 数据 项 ， 那 么 
e.0ldValue 属 性 要 么 是 null (YEA Zap ) 或 者 空 字 符 串 (在 Internet Explorert )。 








注意 ”如 果 同 时 打开 了 同一 站 点 的 多 个 页 面 ， 那 么 这 些 页 面 会 依次 发 生 onStorage 事 件 ， 只 有 于 
致 变化 的 页 面 ( 即 前 面 例子 中 的 StorageEvents1.html ) 不 会 发 生 该 事件 。 不 过 ，IE 是 个 例 
外 ， 它 也 会 在 导致 交 化 的 页 面 触发 onStorage 事 件 。 


9.3 ZRA 


作为 HTMLS 的 一 部 分 ，Web 存 储 得 到 了 很 好 的 文 持 。 但 这 并 不 是 存 取 数据 的 唯一 方式 。 为 了 
实现 与 存储 相关 的 不 同 任务 ， 也 出 现 了 其 他 几 种 不 同 的 标准 。 其 中 一 个 就 是 File API, MERA 
度 讲 ， 它 并 不 是 HTML5 规 范 的 内 容 ， 但 得 到 了 现代 浏览 硕 较 好 的 文 持 〈 相 除外) 

File API, 3X4 UD EE RC UY 不 知道 的 ， 还 以 为 它 是 针对 浏览 带 读 写 便 盘 文件 而 制定 
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的 一 个 全 方位 的 标准 。 然 而 , 它 可 没有 那么 高 远 的 志 问 ,或 者 说 没有 那么 强大 ,简单 地 说 , File API 
只 是 规定 怎么 从 全盘 上 提取 文件 , 直接 交 给 在 网 页 中 运行 的 JavaScript 代 人 码 。 然 后 代码 可 以 打开 文 
件 探 究 数据 ， 无 论 是 文本 文件 还 是 其 他 文件 。 注 意 ， 关 键 在 于 文件 会 被 直接 交 给 JavaScript 代 码 。 
与 以 往 的 文件 上 传 不 一 样 ，File API 不 是 为 了 癌 服 务 上 前 提交 文件 设计 的 。 

另外 ， 关 于 File API 不 能 做 什么 ， 也 非常 值得 注意 。 很 明显 ， 它 不 能 修改 文件 ， 也 不 能 创建 
新 文件 。 想 保存 任何 数据 ， 你 都 要 采用 其 他 办 法 ， 比 如 通过 XMLHttpRequest (参见 11.1.1 节 ) 把 数 
据 发 送 到 服务 硕 ， 或 者 把 它 保存 在 本 地 存储 空间 中 。 

说 到 这 儿 ， 有 读者 可 能 会 认为 File API 不 如 本 地 存储 有 用 。 咖 ， 对 于 大 多 数 站 点 而 言 ， 的 确 
如 此 。 可 是 ， 从 某 种 意义 上 讲 ，File API 却 为 HTML 扩 展 了 疆界 ， 至 少 在 没有 搬 件 的 情况 下 ， 通 
过 它 能 够 走 得 更 远 。 






































注意 目前，File API 对 于 某 些 专门 网 站 是 不 可 或 缺 的 。 将 米 ， 随 外 其 功能 的 增强 ， 还 会 变 得 越 
米 越 重要 。 比如, 将 来 的 菜 个 版 本 可 能 会 允许 网 页 在 本 地 硬盘 上 写 文件 ,让 用 户 通 过 “ 保 
存 对 话 框 ”控制 文件 名 和 保存 位 置 。Flash 浏 览 器 插件 已 经 具备 了 这 种 能 力 。 


9.3.1 取得 文件 


在 通过 File API 操 作文 件 之 前 ， 首 先 必 须 取 得 文件 。 为 此 ， 有 三 种 方式 可 以 选择 ; 实际 上 ， 
归根 结 底 只 有 一 种 方式 ， 那 就 是 必须 由 访客 目 己 选择 文件 然后 提交 给 你 。 
x HOME. 
口 使 用 <input> 元 素 。 将 其 type 属 性 设置 为 file， 这 样 就 能 得 到 一 个 标准 的 上 传 文件 框 。 不 
过 ， 编 写 一 点 JavaScript 来 利用 File API， 就 可 以 在 本 地 打开 文件 。 
OQ 隐藏 的 <input> 元 素 。 嫌 <input> 元 系 太 难看 ? 为 了 保证 风格 一 致 ， 可 以 把 <input> 元 素 隐 
藏 起 来 ， 显 示 一 个 漂 吝 的 按钮 。 用 户 单 击 按 钮 ， 就 通过 JavaScript 调 用 隐藏 的 cinput> 元 系 
的 click() 方 法 。 这 样 就 会 显示 标准 的 文件 选择 对 话 框 。 
O 拖 放 。 如 采 浏 览 硕 文 持 拖 放 ， 可 以 从 蝎 面 或 货源 管理 硕 中 把 文件 拖 放 到 网 页 上 。 
接 下 来 几 节 束 讨 论 这 几 种 方式 。 不 过 首 和 匈 ， 有 必要 看 看 浏览 大 当前 对 File API 的 文 持 情 况 。 
只 有 这 样 才 能 知道 是 否 能 在 上 自己 的 网 站 中 使 用 它 。 


9.3.2 浏览 器 对 File API 的 支持 情况 
File API 可 不 像 Web 存 储 那么 广 受 支持 。 表 9-2 展 示 了 浏览 器 对 它 的 支持 情况 。 


表 9-2 ”浏览 器 对 File API 的 支持 情况 
IE Firefox Chrome Safari Opera Safari iOS Android 
最 低 版 本 10 3.6 8 6 11.1 3 




















* 目前 ，IE10 只 发 布 过 测试 版 。 
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表 中 所 示 版 本 下 的 浏览 硕 可 以 运行 本 章 的 所 有 例子 。 但 是 , 这 些 浏 览 硕 几乎 没有 一 个 实现 了 
File API 的 全 部 功能 。 原 因 是 这 个 标准 的 某 些 部 分 ( 即 那 些 与 处 理 二 进 制 Blob 数 据 及 “ 切 分 ” 数 
据 块 有 关 的 功能 ) 还 有 可 能 变化 。 

由 于 File API 需 要 一 些 比 普通 网 页 更 高 的 权限 ， 所 以 通过 JavaScript 来 填充 这 些 “ 空 日 的 ”功能 
是 不 现实 的 。 为 此 , 可 以 选择 Flash 或 Silverlight 质 件 。 比 如 , 访问 https:/github.com/MISwitch/dropfile， 
可 以 找到 一 个 “腻子 脚本 ”, 该 脚本 利用 Silverlight 拦 截 拖 放 过 来 的 文件 ， 打开 并 将 其 内 容 交 给 网 页 
中 的 JavaScript 代 码 。 





9.3.3” 读 取 文 本 文件 


使 用 File API 可 以 直接 读 取 文 本 文件 的 内 容 。 图 9-5 展 示 了 一 个 例子 ， 是 一 个 页 面谈 取 了 一 个 
网 页 文件 中 的 标准 ， 然 后 显示 出 来 。 


LI | 图 9-5， 单 击 Browse 按 钮 ( 或 Choose File, 
| L Read Tex 在 Chrome 中 ) ,选择 一 个 文件 ， 然 后 单 击 
L| http://localhost/manitest/ReadText.html "|C | 大 OK。 无 需 Ef£ 网 页 中 的 JavaS cript 就 能 


4 Zu I 
CAHTML5 Chapter OTIHTML5Template.html 取得 文本 文件 ， 把 内 容 复制 到 页 面 中 











«IDOCTYPE html» «html lang-"'en"» <head> «meta charset-"utf- 8" 
«title-A Tiny HTML Document-/title? «!-- Note that the following files 
don't exist. They're for demonstration purposes only. --> <link 
href-"styles.css" rel-" stylesheet" «script src—'" scripts.js ></script> 
X/head- <body> «p-Let's rock the browser, IITML 5 style.</p> 
</body> «/html- 








要 创建 这 个 例子 ， 首先 要 使 用 一 个 cinput type-"file"»202&, IUEELBE 3-8 SCA TERQUE Vi aum 
按钮 : 
«input id-"fileInput" type-"file" onchange="processFiles(this.files)"> 
Aib. SEK R Torm TR HERRAR 25 Webllit 2*8 B) «input»26 38 AI], xA 
<input> 有 目 己 处 理 文件 的 方式 。 访 客 选择 了 一 个 文件 后 ， 就 会 触发 这 个 <input> 元 系 的 onChange 
事件 ， 因 而 就 会 执行 processFiles() 函 数 。 这 个 函数 将 会 通过 JavaScript 来 打开 文件 。 
下 面 我 们 就 来 一 行 一 行 地 分 析 processFiles() 图 数 。 这 个 图 数 首先 必须 从 <input> 元 素 提供 的 
文件 集合 中 取得 第 一 个 文件 。 除 非 你 允许 用 户 选择 多 个 文件 〈 使 用 multiple 属 性 )， 否 则 文件 集 
合 中 只 会 有 一 个 文件 ， 而 该 文件 在 集合 中 的 索引 就 是 0: 


function processFiles(files) ( 
var file - files[0]; 
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注意 ”每 个 文件 对 象 都 有 三 个 有 用 的 属性 : name 属 性 保存 文件 名 (不 包含 路 径 )，size 属 性 保存 
文件 的 字 节 大 小 ， 而 (如 果 可 以 确定 的 话 ) type 属 性 保存 文件 的 MIME 类 型 ( 参见 5.3.2 
节 )。 可 以 分 别 读 取 这 三 个 属性 ， 然 后 加 入 判断 ， 比 如 拒绝 处 理 超过 一 定 大 小 的 文件 ， 或 
者 只 允许 菜 种 类 型 的 文件 。 


然后 ， 创 建 FileReader 对 象 ， 以 便 处 理 文 件 : 
var reader = new FileReader(); 
紧 接 着 ， 差 不 多 就 可 以 调用 FileReader 的 方法 来 提取 文件 内 容 了 。 但 这 个 对 象 的 方法 和 都 是 措 
步 的 ， 也 就 是 说 可 以 不 必 等 待 数据 而 立即 读 取 。 要 取得 文件 内 容 ， 前 和 完 要 人 处理 onLoad 事 件 : 
reader.onload = function (e) { 
// 这 个 事件 发 生 ， 意 味 着 数据 准备 好 了 
// 把 它 复制 到 页 面 的 <div> 元 素 中 
var output = document.getElementById("fileOutput"); 


output.textContent = e.target.result; 
n 


最 后 ， 在 这 个 事件 处 理 程序 之 后 ， 调 用 FileReader 的 readAsText() 方 法 : 


reader.readAsText(file); 


} 

这 个 方法 会 把 文件 内 容 转 换 成 一 个 长 字符 串 , 保存 在 发 送 给 onLoad 事 件 的 e.target.result 中 。 

readAsText() 方 法 只 能 处 理 包含 文本 内 容 ( 而 不 是 二 进 制 内 容 ) 的 文件 。HTML 文 件 当 然 没 
有 问题 ,图 9-5 展 示 的 就 是 读 取 HTML 文 件 的 结果 。CSV 格 式 也 是 各 种 有 用 的 纯 文本 格式 中 的 一 种 ， 
它 是 所 有 电子 表格 程序 都 文 持 的 一 种 导出 格式 。XML 也 是 纯 文 本 格式 ， 它 是 程序 间 交 换 数 据 的 
一 种 标准 。( XML 也 是 Office XML 格式 的 基础 ， 因 此 可 以 使 用 readAsText() 方 法 直接 处 理 .docx 
和 .xlsx 文 件 。) 


























注意 JavaScript 语言 还 有 内 置 的 XML 解释 器 ， 因 此 可 以 从 XML 文件 中 直接 提取 所 需 内 容 。 当 
然 ， 处 理 XML 文 件 要 编写 很 多 代码 ， 而 且 处 理 大 文件 的 效率 也 不 高 。 与 把 大 文件 上 传 到 
Web 服 务 器 并 在 服务 器 上 处 理 相 比 ， 在 本 地 处 理 大 XML 文件 没有 多 大 优势 。 不 过 ， 我 们 
至 少 能 够 看 到 File API 市 来 了 哪些 可 能 性 ， 而 这 些 功能 是 几 年 前 的 人 们 连 想 也 不 敢 想 的 。 


readAsText() 只 是 众多 访 取 文件 的 方法 之 一 。FileReader 对 象 提 供 的 方法 还 有 : 
readAsBinaryString()., readAsDataURL()fllreadAsArrayBuffer(); Firefox 尚 末 支 持 最 后 一 个 方法 。 

其 中 ，readAsBinaryString() 方 法 可 以 让 应 用 处 理 二 进 制 编码 的 数据 ,但 基本 上 就 是 把 数据 
保存 到 一 个 文本 字符 串 中 , 效率 不 高 。 如 果 你 真 想 要 解释 二 进 制 数 据 ， 疏 介 就 要 处 理 好 特别 复杂 
的 编码 问题 。 规 范 中 更 好 的 文 持 方案 是 “ 切 分 ”出 一 小 段 二 进 制 数据 ， 以 便 每 次 只 处 理 一 部 分 内 
容 。 但 在 本 书写 作 时 ， 这 项 功能 还 在 修订 ， 不同 浏览 器 的 实现 也 不 一 样 。( 有 兴趣 的 读者 可 以 参 
考 最 新 的 标准 : http://www.w3.org/TR/FileAPI/, ) 
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而 readAsDataURL() 方 法 则 让 我 们 能 方便 地 取得 图 片 数据 。9.3.6 节 将 介绍 如 何 使 用 这 个 方法 。 
不 过 ， 我 们 该 花 点 时 间 ， 先 把 前 面 的 例子 页 面 改 造 得 漂亮 些 。 


9.3.4 "ERE Lf 


Web 开 发 人 员 一 致 认为 , 用 于 提交 文件 的 标准 <input> 控 件 非常 难看 。 虽 然 必须 得 用 它 , 但 实 
际 上 可 以 不 证 任何 人 看 见 它 。 换 句 话 说 ， 就 是 像 下 面 这 样 把 它 隐 藏 起 来 : 


itfileInput { 
display: none; 








RASIAH, HIT ATEM ES. — T EOBITITICHDCRI EUPETE, Ti EL nf LHET 
修改 其 外 观 : 


«button onclick="showFileInput()">Analyze a File«/button» 


最 后 一 步 是 处 理 按钮 单 击 事 件 ， 通 过 该 事件 来 于 工 调用 隐藏 的 <input> 元 系 的 click() 方 法 : 


function showFileInput() { 
var fileInput = document.getElementById("fileInput"); 
fileInput.click(); 


Í 

HIF, fPab REDE zZ rshowFileInput() KAE, A RR APRE i HS Browsefk 4h , 
并 显示 出 对 话 框 供 访客 选择 文件 。 访 客 选 择 了 文件 后 ， 叉 会 触发 隐藏 的 cinput> 元 素 的 onChange 
事件 ， 于 是 processFiles() 果 数 运 行 ， 一 切 跟 以 前 一 样 。 





9.3.5 一 次 读 取 多 个 文件 


没有 理由 限制 用 户 一 次 只 能 提交 一 个 文件 .HTML5 也 支持 一 次 提交 多 个 文件 ,只 要 为 cinput> 
元 素 添 加 multiple 属 性 即 可 : 


«input id-"fileInput" type-"file" onchange-"processFiles(this.files)" 
multiple» 


这 样 ， 用 户 就 可 以 在 打开 的 对 话 框 中 一 次 选择 多 个 文件 了 《比如 在 Windows 中 按 Ctrl 键 并 单 
击 多 个 文件 , 或 者 用 鼠标 拖 出 一 个 选择 框 )。 文 持 选 择 多 个 文件 ,代码 也 要 相应 修改 。 换 句 话说 ， 
不 能 再 像 前 面 例子 中 那样 ， 只 取得 集合 中 的 第 一 个 文件 了 。 这 次 ， 要 使 用 for 循 环 来 依次 处 理 每 
个 文件 : 

for (var i=0; i«files.length; i++) { 


// 取 得 下 一 个 文件 
var file = files[i]; 











// 为 这 个 文件 创建 FileReader 对 象 ， 然 后 运行 相同 的 代码 
var reader = new FileReader(); 
reader.onload = function (e) { 
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E 


reader.readAsText(file); 


9.3.6 ” 读 取 图 片 文 件 


本 面 我 们 看 到 了 ，FileReader 人 处 理 文本 内 容 只 需要 一 步 。 同 样 ， 人 处 理 图 片 内 容 也 这 人 么 人 简单 ， 
而 这 就 要 归功 于 readAsDataURL() 方 法 。 

图 9-6 展 示 了 一 个 涉及 两 项 功能 的 例子 : 人 处理 图 片 和 文件 拖 放 。 提 交 的 图 片 文 件 用 于 绘制 元 
系 的 背景 。 当 然 也 可 以 把 图 片 绘制 到 画布 中 ,然后 利用 画布 的 原始 像 双 处 理 功 能 来 修改 图 片 。 综 
舍利 用 该 技术 ， 可 以 让 用 户 把 图 片 拖 到 页 面 中 ， 然 后 在 图 片上 绘制 或 者 修改 图 片 ， 最 后 再 使 用 
XMLHttpRequest 调 用 ( UL11.1.2755 ) 把 结果 上 传 到 服务 器 。 














图 9-6: 为 页 面 提供 图 片 
有 两 种 方式 : 使 用 下 面 
的 文件 上 传 控 件 ， 或 者 
把 一 或 多 个 图 片 拖 放 到 
虚线 框 中 














y 


Te 
5 | 
IE 


No file chosen No file chosen 











ABT uA. Bc 758. URERA TEST BUB m, 3x 7o 
素 是 一 个 名 为 dropBox 的 <div>: 


«div id-"dropBox"» 
«div»Drop your image here...«/div» 


</div> 
T3 JLETIR] EIER HI, W ANHE ERD, WEM : 
#dropBox { 


margin: 15px; 

width: 300px; 

height: 300px; 

border: 5px dashed gray; 
border-radius: 8px; 
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background: lightyellow; 
background-size: 1005; 
background-repeat: no-repeat; 
text-align: center; 


j 


#dropBox div { 
margin: 100px 70px; 
color: orange; 
fontssize: 25px; 
font-family: Verdana, Arial, sans-serif; 


} 

眼光 敏 钳 的 读者 肯定 已 经 发 现 了 background-size 和 background-repeat 属 性 。 这 两 个 属性 是 
为 了 接 下 来 的 功能 作 准 备 的 。 当 把 图 上 厂 拖 放 到 这 个 <div> 上 时 ,图片 会 作为 它 的 背景 。 而 
background-size 属 性 是 为 了 缩小 图 片 以 全 部 显示 ，background-repeat 属 性 则 是 为 了 不 证 几 片 重 
复 显 示 。 

为 了 处 理 放 置 文件 的 操作 ， 需 要 处 理 三 个 事件 : onDragEnter 、onDrag0ver 和 onDrop。 页 面 一 
加 载 完 成 ， 就 会 为 这 三 个 事件 添加 处 理 程序 : 


var dropBox ; 











window.onload = function() { 
dropBox = document.getElementById("dropBox"); 
dropBox.ondragenter = ignoreDrag; 
dropBox.ondragover = ignoreDrag; 
dropBox.ondrop = drop; 


n 

其 中 ，ignoreDrag() 也 数 同时 处 理 onDragEnter 和 onDrag0ver 事 件 ， 前 者 在 鼠标 指针 进入 放置 
区 时 发 生 , 后 者 在 拖 动 文件 的 鼠标 指针 位 于 放置 区 之 上 时 发 生 。 之 所 以 用 同一 个 PE ERAT 
fF. Rp Xe SXPSA SEPEIEH BU, REVA A d EL CAE ZA ULASCRI RT & 367] PRARCH T 
PHUN F : 


function ignoreDrag(e) { 
// E] 79 ATI] A RE dea, TVA SEGA 
// 确 保 没 有 其 他 元 素 会 取得 这 个 事件 
e.stopPropagation(); 
e.preventDefault(); 


我 们 要 响应 y 的 事件 是 onDrop， 这 个 事件 一 发 生 ， 就 说 明 要 取得 和 处 理 文 件 了 。 不 过 ， 由 于 存 
在 两 种 向 页 面 提交 文件 的 方式 ， 所 以 drop() 函 数 调用 了 实际 上 负责 处 理 的 processFiles() 函 数 : 


function drop(e) { 


// 取 消 事件 传播 及 默认 行为 
e.stopPropagation(); 
e.preventDefault(); 

















// 取 得 拖 进来 的 文件 
var data = e.dataTransfer; 
var files = data.files; 
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// 将 其 传 给 真正 的 处 理 文件 的 函数 
processFiles(files); 


} 
最 后 一 个 因数 就 是 processFiles() ， 它 会 创建 一 个 FileReaderz ， 为 其 on1oad 事 件 添 加 一 个 蚂 
数 ， 然 后 调用 readAsDataURL() 将 图 片 转换 为 数据 URL (参见 6.2.3 市 )。 


注意 ”正如 在 学 习 Canvas 时 所 提 到 的 ， 数 据 URL 是 一 种 用 长 字符 串 表 示 图 片 的 方式 。 这 种 方式 
让 传递 图 片 数 据 变 得 十 分 方便 。 为 了 在 网 页 中 显示 图 片 ， 可 以 将 Cimg> 元 素 的 STC 属 性 设 
置 为 图 片 URL (正如 6.2.3 节 所 做 的 那样 )， 也 可 以 将 CSS 的 background-image 属 性 设置 为 
K A URL ( 像 这 个 例子 中 一 样 )。 


function processFiles(files) { 
var file - files[0]; 


//&|3& FileReader 
var reader - new FileReader(); 


// 告 诉 它 在 准备 好 数据 URL 之 后 做 什么 
reader.onload = function (e) { 


// 使 用 图 像 URL 来 绘制 dropBox 的 背景 
dropBox.style.backgroundImage = "url('" + e.target.result + "')'; 


3 


// 读 取 图 片 
reader.readAsDataURL (file); 
Í 


FileReader 还 有 其 他 事件 ， 在 读 取 图 片 文件 的 过 程 中 可 以 选择 使 用 。 如 果 读 取 图 片 的 时 间 比 
较 长 ， 可 以 通过 onProgress 事 件 〈 间 上 歇 性 地 触发 ) 来 确定 已 经 加 载 了 多 大 比例 。( 可 以 调用 
FileReader 的 abort() 方 法 取消 未 完成 的 操作 。) 如 果 打 开 或 谈 取 文件 时 发 生 错 误 ,， 会 触发 onError 
事件 。 而 在 操作 完成 时 ， 则 触发 onLoadEnd 事 件 ( 包括 由 于 错误 导致 的 终止 )。 








天 于 数据 库 

你 是 不 是 正在 寻找 一 个 更 强大 的 本 地 存储 方案 ”如 果 文 本 字符 串 ( Web 存储 ) 和 简单 文件 
(File API) 都 没有 吸引 力 ， 那 要 是 浏览 器 中 有 一 个 完整 、 小 型 的 数据 库 怎 么 样 ? 

这 个 想法 已 经 开始 变 成 现实 了 。 事 实 上 ，Chrome、Safari 等 浏览 器 已 经 按照 Web Database 
标准 实现 了 一 个 数据 库 。 只 不 过 这 个 标准 最 终 没 有 得 到 Firefox 的 认可 ， 所 以 现在 基本 上 已 经 
被 废弃 。 取而代之 的 则 是 一 个 全 新 的 IndexedDB 标准 , 看 起 来 所 有 浏览 器 开发 商都 赞同 这 个 方 
A. TAE IndexedDB 的 情况 ， 请 读者 自己 看 一 看 Firefox 的 文档 : http://developer.mozilla.org/ 
en/IndexedDB ， 或 者 在 HTMLS 实验 室 中 动手 尝试 一 下 ， 地 址 为 : http://tinyurl.com/3fuvu9g。 


260 | 第 9 章 数据 存储 





zm 访问 网 站 ， 得 先 上 网 。 这 一 点 连 三 岁 小 孩 都 知道 。 那 为 什么 还 要 用 一 章 来 讲 离线 应 用 

uo 离线 应 用 的 想法 看 起 来 太 不 合适 时 宜 了 。 毕 竟 ，Web 应 用 已 经 超越 几 代 离 线 桌面 
应 用 ， 成 为 了 世界 的 潮流 。 很 多 事 ， 比 如 实时 掌握 查理 辛 的 最 新 动态 ,或 者 订购 一 把 办 公 椅 ， 
必须 随时 在 线 才 有 可 能 。 不 过 别 忘 了 ， 就 算是 Web 应 用 也 不 可 能 永远 不 掉 线 。 而 在 电脑 短暂 断 网 
的 情况 下 ， 它 们 应 该 能 够 正常 工作 。 换 句 话 说， 离线 Web 应 用 可 以 应 付 间 欣 性 的 网 络 中 断 。 

对 于 使 用 上 网 手机 和 平板 的 用 户 来 说 ， 离 线 应 用 尤其 重要 。 为 了 把 问题 说 明白 ,让 我 们 看 一 
个 例子 。 假 设 你 在 使 用 一 个 Web 应 用 的 时 候 恰 好 通过 一 条 隧道 。 一 进 隧 道 ， 你 就 看 到 了 一 个 错误 
页 面 ， 之 前 做 过 的 工作 全 部 丢失 。 等 出 了 隧道 之 后 ， 你 必须 全 部 从 头 来 过 。 但 是 ， 如 果 这 个 Web 
应 用 支持 离线 功能 , 那么 你 就 不 会 有 这 种 痛 昔 的 经 历 了 。 虽然 部 分 功能 可 能 会 暂时 不 能 用 , 但 你 
不 会 被 迫 退 出 。( 当然 ， 有 些 隧 道 可 能 会 很 长 ， 而 真正 做 得 好 的 离线 Web 应 用 能 保证 乘 三 个 小 时 
飞机 不 间断 ， 如 果 你 需要 ， 甚 至 到 刚果 旅行 三 个 星期 都 没 问 题 。 说 到 底 ， 就 是 离线 多 长 时 间 都 不 
应 该 出 问题 。) 

本 章 介绍 怎么 把 网 页 (或 一 组 网 页 ) 转换 成 离线 应 用 。 此 外 ,还 会 介绍 如 何 获悉 网 站 可 用 或 
者 网 站 离线 ， 以 便 作出 相应 处 理 。 

















什么 时 候 考 虑 离线 

该 不 该 让 我 的 网 页 支持 离线 浏览 呢 ? 

离线 应 用 并 不 适合 所 有 网 页 。 比 如 ,把 查询 股票 报价 的 网 页 转 挽 成 离线 应 用 毫 无 意义 ， 因 
为 这 个 页 面 存 在 的 唯一 价值 就 是 能 够 连接 Web 服务 器 更 新 数据 。 不 过 ， 如 果 是 一 个 股票 分 析 
页 面 ， 那 么 下 载 一 批 数 据 后 ， 即 使 离线 也 可 以 生成 图 表 或 分 析 报 告 。 这 样 ， 在 能 上 网 时 把 数据 
下 载 下 来 ， 即 使 进 了 隧道 也 不 妨碍 你 更 改选 项 或 单 击 按钮 。 

离线 功能 也 适合 那些 具有 交互 性 和 有 状态 的 网 页 ， 也 就 是 动用 大 量 JavaScript 代码 在 内 存 
中 维护 很 多 信息 的 网 页 。 这 些 网 页 本 身 就 可 以 实现 很 多 功能 ， 因 此 支持 离线 就 有 意义 。 不 过 ， 
其 中 某 个 网 页 突然 丢掉 连接 的 代价 也 更 大 。( 想象 一 下 ， 用 户 在 执行 一 项 复杂 的 任务 时 ， 突 然 
中 断 任务 怎 能 不 让 人 觉得 讨厌 呢 ? ) 虽然 包含 简单 内 容 的 网 页 没 多 大 必要 做 成 离线 的 , 但 浏览 
器 中 的 字 处 理工 具 显然 需要 离线 支持 。 事 实 上 , 这 样 的 离线 应 用 称 怕 恰恰 能 够 取代 功能 更 完善 
的 桌面 软件 。 
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另外 ,还 要 考虑 用 户 。 如 果 有 些 用 户 不 可 能 经 常 上 网 , 或 者 可 能 会 通过 移动 设备 访问 应 用 
(比如 为 平板 电脑 设计 的 地 图 应 用 )， 那么 支持 离线 功能 就 是 必要 的 。 如 果 情 况 并 非 如 此 ， 那么 
考虑 离线 只 会 自 寻 烦恼 。 


10.1 通过 描述 文件 缓存 资源 


离线 应 用 的 一 项 基本 技术 就 是 缓存 , 即 下 载 文件 (如 网 页 ) 并 在 用 户 计算 机 上 保存 一 份 副 本 。 
有 了 这 份 副本 ， 即 使 计算 机 不 能 上 网 ， 浏 览 需 也 可 以 使 用 缓存 的 文件 。 

创建 离线 应 用 的 三 个 步骤 如 下 。 

(1) 创建 描述 文件 。 

描述 文件 ( manifest file ) 是 一 种 特殊 文件 ， 告 诉 浏览 咒 保 存 什么 文件 ， 不 保存 什么 文件 ， 以 
及 用 什么 文件 代 蔡 其 他 文件 。 描 述 文件 中 列 出 的 所 有 需要 绥 存 的 内 容 ， 构 成 了 所 谓 的 离线 应 用 。 

(2) 修改 网 页 ， 引 用 描述 文件 。 

引用 了 描述 文件 ， 浏 览 如 在 请 求 页 面 时 就 会 下 载 描述 文件 。 

(3) 配置 Web 服 务 器 。 

这 一 步 最 重要 ， 因 为 Web 服 务 需 必须 以 正确 的 MIME 类 型 提供 描述 文件 。 稍 后 我 们 会 介绍 影 
啊 绥 存 的 其 他 问题 。 

接 下 来 的 几 市 ， 我 们 就 分 别 讲 解 这 几 个 步骤 。 











传统 缓存 与 离线 应 用 

对 Web 开发 而 言 ， 缓 存 并 非 新 事物 。 浏 览 器 经 常 利用 缓存 以 避免 下 载 相 同 的 文件 。 人 毕竟， 
如 果 很 多 网 页 共用 相同 的 样式 表 , 那 为 什么 每 个 页 面 都 下 载 多 次 呢 ? 不 过 , 浏览 器 的 这 种 缓存 
方式 与 离线 应 用 的 缓存 方式 可 不 一 样 。 

触发 浏览 器 中 传统 缓存 的 机 制 是 Web 服务 器 发 送 额 外 的 信息 ， 即 cache-control 头 部 , 这 
个 信息 随同 浏览 器 请 求 的 文件 一 块 发 给 浏览 器 。 头 部 信息 告诉 浏览 器 是 否 应 该 缓存 该 文件 , 缓 
存 多 长 时 间 再 询问 Web 服务 器 该 文件 是 否 更 新 过 。 一 般 来 说 ， 缓 存 网 页 的 时 间 比 较 短 ， 而 缓 
存 网 页 资源 (如 样式 表 、 图 片 和 脚本 ) 的 时 间 比 较 长 。 

相对 而 言 ， 离 线 应 用 由 一 个 单独 的 文件 ( 即 描述 文件 ) 控制 ， 也 不 限定 时 间 。 大 致 来 说 ， 
它 的 规则 是 “如 果 网 页 是 离线 应 用 的 一 部 分 ， 如 果 浏 览 器 已 经 缓存 了 该 应 用 ， 如 果 应 用 的 定义 
没有 改变 ， 那 么 就 使 用 缓存 的 网 页 。” 作 为 Web 开发 人 员 ， 可 以 声明 一 些 例外 ， 告 诉 浏览 器 不 
缓存 某 些 文件 ， 或 者 不 用 某 个 文件 替代 另 一 个 文件 。 但 是 ， 不 用 考虑 过 期 时 间 和 其 他 一 些 烦 琐 
的 细节 。 


10.1.1 创建 描述 文件 


描述 文件 是 HTML5 离 线 应 用 功能 的 关键 所 在 。 描 述 文件 就 是 一 个 文本 文件 ， 其 中 列 出 了 需 
要 缓存 的 文件 。 
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描述 文件 第 一 行 一 定 是 “CACHE MANIFEST" ( 全 部 大 写 ): 

CACHE MANIFEST 

然后 ， 再 列 出 需要 缓存 的 文件 。 比 如 ， 下 面 的 代码 表示 绥 存 两 个 网 页 C 即 7.2.4 节 的 人 格 测试 
应 用 的 两 个 页 面 ): 

CACHE MANIFEST 


PersonalityTest.html 
PersonalityTest Score.html 


文件 中 的 空格 ( 包括 上 面 的 空 行 ) 是 可 选 的 ， 可 以 根据 逢 要 添加 。 

为 了 离线 应 用 的 正常 运行 ， 浏览 带 必 须 缓存 其 所 需 的 一 切 ， 包括 网 页 和 网 页 用 到 的 资源 C JA 
本 、 图 片 、 样 式 表 和 和 通 入 的 字体 )。 下 面 这 个 示例 描述 文件 列 出 了 所 有 相关 的 资源 : 

CACHE MANIFEST 

# pages 

PersonalityTest.html 

PersonalityTest Score.html 








# styles & scripts 
PersonalityTest.css 


PersonalityTest.js 


# pictures & fonts 
Images/emotional bear.jpg 
Fonts/museo slab 500-webfont.eot 
Fonts/museo slab 500-webfont.woff 
Fonts/museo slab 500-webfont.ttf 
Fonts/museo slab 500-webfont.svg 


关于 这 个 文件 有 两 点 要 注意 。 首 先 ， 以 # 开 头 的 行 是 注释 ， 说 明 下 面 缓存 哪些 内 容 。 其 次 ， 
有 些 资 源 位 于 子 目录 下 (比如 emotional bearjpg， 位 于 Images 文 件 夹 中 )。 只 要 这 些 目录 与 Web 服 
务 顺 中 的 目录 对 应 ,而且 浏览 器 能 够 访问 到 该 目录 , 就 可 以 像 这 样 把 它们 作为 离线 应 用 的 一 部 分 
绥 存 下 来 。 

复 琳 的 网 页 一 般 都 需要 很 多 文 持 文件 ， 因 此 摘 述 文件 也 会 很 长 很 复杂 。 因 此 ， 最 忌讳 的 问题 
是 拼写 错误 ， 一 个 文件 名 写 错 ， 就 会 导致 整个 离线 应 用 无 法 和 运行。 不 久 的 将 来 ，Web 编 辑 髓 等 工 
具 可 以 帮 我 们 减少 这 种 麻烦 。 它 们 可 以 根据 选中 的 网 页 自动 创建 描述 文件 , 同时 为 修改 和 维护 描 
述 文 件 提 供 辅助 功能 。 




















提示 有 了 时候， 可 能 不 必 缓 存 一 些 很 大 但 又 不 重要 的 资源 。 上 比如， 大 照片 或 大 的 横幅 广告 。 不 
过 ， 假 如 缺少 这 些 文件 会 影响 页 面 呈 现 (比如 导致 错误 消息 、 言 怪 的 页 面 空 白 或 布局 凌 
乱 )， 那 应 该 使 用 JavaScript 在 用 户 离线 时 调整 页 面 ，10.2.3 节 将 介绍 如 何 检测 用 户 设置 是 
FERo 








准备 好 描述 文件 后 ,可 以 把 它 保存 在 网 站 根 目 录 下 , 与 其 他 网 页 放 在 一 起 。 描述 文件 的 名 字 
可 以 随便 起 , 但 有 两 个 扩展 名 还 是 推荐 大 家 使 用 , 一 个 是 .manifest, 一 个 是 .appcache。 前 者 看 起 来 








10.1 ”通过 描述 文件 缓存 资源 | 263 





比较 符合 逻辑 (比如 PersonalityTest,manifest )， 但 却 与 某 些 Windows Web 服 务 硕 〈 特 别 是 .NET 应 用 
使 用 的 ClickOnce 部 署 过 程 ) 中 使 用 的 文件 类 型 冲突 。 后 者 其 实 也 很 合适 ( Personality Test.appcache ), 
但 不 太 稼 见 。 最 重要 的 还 是 在 Web 服 务 希 上 进行 配置 ， 让 它 能 够 认识 这 两 个 扩展 名 。 如 果 你 有 权 
限 设置 Web 服 务 硕 , 可 以 根据 10.1.3 方 的 介绍 完成 配置 。 如 采 没 有 权限 , 可 以 问 一 问 主机 托管 公司 ， 
看 他 们 配置 了 什么 扩展 名 来 文 持 摘 述 文件 。 





缓存 有 没有 限制 

缓存 空间 有 多 大 ? 

不 同 浏览 器 对 离线 应 用 缓存 的 限制 有 很 大 不 同 。 

移动 浏览 器 就 是 一 个 例子 。 因 为 移动 设备 本 身 空 间 有 限 ， 所 以 对 缓存 的 限制 也 比较 严 苛 。 
在 本 书写 作 时 ，iPad 和 iPhone 中 的 Safari 对 离线 应 用 缓存 的 限制 是 S MB 。 

桌面 浏览 器 的 限制 也 大 不 一 样 。Firefox 的 默认 设置 是 最 大 $S0MB ， 而 浏览 器 用 户 可 以 调 高 这 
个 上 限 。( 在 Firefox 菜 单 中 选择 “选项 ”, 单 击 “高 级 ”图 标 , 然后 选择 “网 络 ” 选项 卡 。) Chrome 
为 离线 应 用 提供 的 空间 只 有 少 得 可 怜 的 5 MB， 除 非 你 开发 Chrome 应 用 ( http://code. google.com/ 
chrome/extensions/apps.html )， 或 者 使 用 烦琐 的 配置 hack ( http://tinyurl.com/5w83opp )。Chrome 开 
发 团队 打算 将 来 解除 这 个 限制 ， 让 用 户 自己 控制 每 个 站 点 可 用 的 缓存 大 小 ; 不 过 ， 目 前 暂时 还 
只 能 限制 为 MB. 

显然 ， 浏 览 器 间 的 这 种 不 一 致 性 会 导致 问题 。 如 果 你 想 创 建 的 离线 应 用 需要 超过 $ MB 的 
空间 ， 那 么 Firefox 没 问题 ， 但 Chrome 就 不 行 。 更 麻烦 的 是 ，Chrome 用 户 每 次 访问 你 的 站 点 时 ， 
Chrome 都 会 缓存 该 应 用 ， 但 只 要 达到 空间 限制 ， 已 经 下 载 的 文件 也 会 被 完全 删除 。 你 为 离线 
所 做 的 一 切 都 将 付 之 东 流 ， 而 且 Chrome 用 户 必 须 上 网 才能 使 用 你 的 应 用 。 

关键 在 于 ， 将 来 的 离线 应 用 可 能 会 拥有 很 多 存储 空间 ， 而 现在 则 只 能 以 5 MB 作为 上 限 。 
结果 呢 ， 通过 缓存 文件 提高 性 能 (把 常用 的 大 文件 下 载 并 长 期 保存 下 来 ) 的 想法 目前 看 来 似乎 
有 点 不 切实 际 。 不 过 ， 和 希望 这 种 情况 很 快 能 得 到 改观 。 


10.1.2 ”使 用 描述 文件 


只 是 创建 描述 文件 可 不 行 ,还 必须 让 浏览 硕 知 道 它 在 哪里 。 换 句 话 说， 你 得 在 目 己 的 网 页 中 
引用 它 。 为 此 ,要 为 <htm1> 元 素 添加 manifest 属 性 ,将 该 属性 的 值 设 置 为 描述 文件 的 路 径 ， 比 如 : 


«IDOCTYPE html» 
«html lang-"en" manifest-"PersonalityTest.manifest"» 





而 且 ， 必 须 给 离线 应 用 包含 的 每 个 页 面 都 添加 同样 的 属性 。 在 前 面 的 例子 中 , LIE P 
两 个 文件 : PersonalityTest.html 和 PersonalityTest Score.html. 


注意 ”一 个 网 站 可 以 有 任意 多 个 离线 应 用 ， 每 个 应 用 分 别 有 自 己 的 描述 文件 即 可 。 离 线 应 用 也 
可 以 使 用 相同 的 资源 ( 比如 样式 表 )， 但 必须 包含 不 同 的 网 页 。 
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10.1.3 ”把 描述 文件 放 到 Web 服 务 器 


测试 描述 文件 的 时 候 需要 一 些 耐 心 ， 任 何 微小 的 问题 都 可 能 导致 静默 失败 ， 结 束 缓存 过 程 。 
同样 ， 在 适当 的 时 候 也 要 试 试 看 ， 看 你 的 离线 应 用 是 否 真 能 在 不 联网 的 情况 下 运行 。 

说 到 测试 ， 从 本 地 硬盘 加 载 文 件 当然 不 行 ， 必 须 得 把 应 用 上 传 到 服务 硕 〈 或 者 使 用 本 机 运行 
的 测试 服务 器 ， 比 如 Windows 自 带 的 IIS )。 

测试 离线 应 用 的 步骤 如 下 。 

(1) 确认 已 经 配置 好 Web 服 务 器 ,添加 了 值 为 text/cache-manifest 的 MIME 类 型 ， 以 便 正 确 交 
付 描述 文件 。 

如 果 Web 服 务 絮 以 其 他 MIME 类 型 ( 包括 纯 文 本 ) 交付 描述 文件 ， 浏 览 需 都 会 忽略 描述 
文件 。 








注意 不 同 的 Web 服 务 器 配置 MIME 类 型 的 方式 也 不 一 样 。 如 果 你 对 这 一 块 不 熟悉 ， 可 以 找 一 个 
熟悉 Web 服 务 器 配置 的 朋友 帮 你 设置 MIME 类 型 ( 第 1 步 )， 同 时 修改 缓存 设置 ( 第 ?2 步 )。 
要 了 解 有 关 MIME 类 型 的 更 多 信息 ， 请 参考 $5.3.2 节 。 


(D) 考虑 关闭 针对 摘 述 文件 的 传统 缓存 〈 人 参见 10.1 节 开头 ) 机 制 。 

这 样 做 的 原因 是 ，Web 服 务 需 可 能 会 告诉 浏览 硕 把 摘 述 文件 缓存 一 段 时 间 ， 就 像 告 诉 它 缓存 
其 他 文件 一 样 。 这 种 做 法 无 可 厚 韭 , 但 却 可 能 给 测试 市 来 极 大 的 难题 。 假设 你 后 来 又 更 新 了 描述 
文件 ， 但 浏览 融 仍 然 会 使 用 缓存 的 旧 描 述 文件 ， 于 是 离线 应 用 也 将 继续 使 用 以 前 缓存 的 网 页 。 
(Firefox 特 别 喜欢 使 用 过 时 的 描述 文件 ， 很 讨厌 。) 为 了 避免 这 一 点 ， 应 该 配置 Web 服 务 硕 ， 让 它 
告诉 浏览 希 不 要 缓存 描述 文件 。 

(3) 在 文 持 离线 应 用 的 浏览 融 〈 也 就 是 除 正 之 外 的 任何 浏览 锅 ) 中 打开 网 页 。( 参见 9.3.2 节 。) 

浏览 硕 在 打开 使 用 了 描述 文件 的 网 页 时 ,可 能 会 请 求 用 户 的 许可 ,之 后 再 下 载 文件 。 移 动 设 
备 通 和 常会 请 求 用 户 的 许可 ， 因 为 设备 本 二 的 存储 空间 有 限 。 吕 面 浏览 各 则 不 一 定 ， 比 如 Firefox 
会 (如 图 10-1 所 示 )， 而 Chrome 和 Safari 不 会 。 

















, mes 图 10-1:Firefox 会 在 加 载 包 


| L Personality Test -| 含 描述 文件 的 网 页 时 显示 
e |$ || |] http://localhost/PersonalityTest.html 


这 条 消息 。 单 击 Allow 授 权 
下 载 并 缓存 该 摘 述 文件 中 
列 出 的 文件 。 随 后 册 浏 览 
此 网 页 ，Firefox 会 检测 描 
述 文件 是 否 有 和 更新， 如果 
有 更 新 则 自动 下 载 新 文件 
而 不 会 再 请 求 授 权 





| Ex : This website (localhost) is asking to store 
ug data on your computer for offline use. 





m s mm " | TE og pem 
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用 户 同 意 之 后 (或 者 浏览 带 没 有 问 )， 绥 存 过 程 就 会 开始 。 浏 览 套 会 下 载 描述 文件 ， 然 后 再 
下 载 描述 文件 中 列 出 的 所 有 文件 。 这 个 下 载 过 程 是 在 后 台 进 行 的, 不 会 影 啊 当前 页 面 。 就 如 同济 
昂 带 下 载 大 图 片 或 下 载 视 频 一 样 ， 同 时 会 显示 页 面 的 其 他 部 分 。 

(4) 模拟 离线 。 

如 果 你 测试 的 是 远程 服务 各 ， 那么 断 开 网 络 连 接 。 如 果 是 在 本 地 Web 服 务 带 ( 即 运行 在 你 的 
计算 机 中 的 服务 各 ) 中 测试 ， 保 止 网 站 (参见 图 10-2 )。 





in I bt Default Web Site Home 


4.83 MATTHEW-PC (Matthew-Pt | 
"a Ppplscon Pools 


10-2; 具体 如 何 停 止 网 站 取决 于 
你 使 用 的 Web 服 务 器 软件 类 型 。 在 
Filter Go -天 ShowAMl Gr: Windows 自 带 的 IIS 中 ( 如 图 ) ,在 
—S 网 站 结 点 上 单 击 右键 ， 就 可 以 找到 


A .| 加 | Si 


sites 
PK Cefault Web Site) || — :4 ë X ü 
Dp ~e [4 9 相应 的 菜单 项 
| NET Error NET N 

Pages Globalization 


(S Add Application... = 本 = 
| GA Add Virtual Directory... Ld ab| | RE 


Edit Permissions.. 





— bnnection Machine Key Pagesand Se 
nup [Strings Controls 
Manage Web Site | 
Refresh 


Remove 


Install Application From Gallery 


























Rename 





B Switch to Content View 





(5) 浏览 离线 应 用 中 的 某 个 页 面 ， 然 后 刷新 。 

即使 告诉 浏览 硕 不 要 绥 存 某 个 页 面 , 有 时 候 它 也 会 缓存 , 因为 只 有 这 样 你 点 击 Back 按 钮 才 会 
返回 上 一 页 。 但 在 单 击 Refresh 或 Reload 时 ， 浏 览 妖 则 会 尝试 访问 Web 服 务 嚣 。 如 有 果 你 请 求 的 是 一 
个 常规 页 面 ,，( 由 于 你 已 经 断 网 或 停 挥 了 网 站 ) 那么 请 求 会 失败 。 可 是 ， 如 果 你 请 求 的 是 离线 应 
用 中 的 一 个 页 面 ,浏览 疾 则 会 从 绥 存 中 找到 该 页 面 ,悄悄 地 代 蔡 之 前 的 页 面 。 此 时 ， 单 击 链 接 可 
以 自由 跳 转 。 如 条 你 单 击 了 不 属于 离线 应 用 的 页 面 ， 则 会 看 到 丈 悉 的 “服务 融 没 有 啊 应 ”的 错误 
消息 。 




















我 的 离线 应 用 离线 不 工作 
离线 应 用 功能 还 不 是 很 稳定 ,一 个 小 小 的 错误 就 会 导致 它 不 能 工作 。 如 果 你 按照 上 面 列 出 
的 步骤 做 了 ,但 在 尝试 访问 离线 页 面 时 还 是 看 到 了 “服务 器 没有 响应 ”的 消息 ， 可 以 试 着 排除 
以 下 常见 的 问题 。 
口 下 载 描述 文件 出 了 问题 。 如 果 你 没有 把 描述 文件 放 在 正确 的 位 置 , 或 者 说 浏览 器 没有 找 
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到 它 ， 那 么 出 问题 是 自然 的 。 但 是 ， 以 正确 的 MIME 类 型 (参见 5.32 节 ) 来 提供 描述 
文件 也 同样 重要 。 

Q 下 载 描述 文件 中 列 出 的 文件 出 了 问题 。 比如 , 描述 文件 中 包含 一 个 不 存在 的 图 片 。 或 者 ， 
要 求 浏览 器 下 载 Web 字体 文件 ， 但 该 字体 文件 的 类 型 又 是 Web 服务 器 所 不 支持 的 。 无 
论 如 何 ， 只 要 浏览 器 下 载 一 个 文件 时 失败 ， 它 也 会 完全 放弃 ( 同时 删除 已 经 下 载 的 所 有 
数据 )。 为 避免 这 个 问题 ， 先 从 简单 的 描述 文件 开始 尝试 ， 比 如 只 包含 一 个 网 页 ， 而 不 
包含 其 他 资源 。 如 果 不 行 ， 再 查看 一 下 Web 服务 器 的 日 志 ， 看 浏览 器 到 底 请 求 了 什么 
资源 ( 这 样 就 能 知道 是 请 求 哪个 文件 出 错 寻 致 了 浏览 器 放弃 )。 

口 浏览 器 缓存 了 旧 的 描述 文件 。 浏 览 器 有 可 能 会 缓存 描述 文件 (根据 传统 的 Web 缓存 
规则 )， 因 此 忽略 更 新 的 描述 文件 。 如 果 你 发 现 有 些 网 页 的 确 是 被 缓存 的 ,但 一 些 新 
网 页 却 没有 被 缓存 ， 那 就 可 能 是 这 个 原因 。 解 决 方案 是 手工 清空 浏览 器 缓存 (参见 
10.1.5 * ), 


10.1.4 ”更 新 描述 文件 


证 应 用 离线 工作 是 要 解决 的 第 一 个 难题 。 第 二 个 难题 是 更 新 离线 应 用 的 内 容 。 
就 拿 前 面 的 例子 来 说 吧 ， 它 缕 存 了 两 个 页 面 。 如 果 你 更 新 了 PersonalityTest.html， 打 开 浏 览 
Ws. 重新 加 和 载 这 个 页 面 ,你 看 见 的 仍然 是 原先 绥 存 的 那个 页 面 。 无 论 你 的 计算 机 目前 能 否 上 网 ， 
都 是 如 此 。 问 题 在 于 ， 只 要 浏览 融 绥 存 了 应 用 ， 那 么 它 就 不 会 同 Web 服 务 需 请 求 新 内 容 。 浏 览 
希 不 管 你 是 否 更 新 了 服务 关上 的 页 面 ， 它 只 管用 目 己 已 经 缓存 的 那个 。 由 于 离线 应 用 没有 过 期 
一 说 ， 所 以 无 论 你 过 多 长 时 间 以 后 再 看 ， 就 算是 几 个 月 以 后 再 看 ,浏览 右上 照旧 还 会 忽略 更 新 后 
的 页面 。 
不 过 ,浏览 器 会 检测 服务 右上 的 描述 文件 是 否 有 更 新 。 因 此 , 重新 保存 一 次 描述 文件 ， 把 它 
放 到 服务 带 上 ， 束 可 以 解决 这 个 问题 卫 ， 对 吧 ”? 
不 一 定 。 要 触发 浏览 需 更 新 绥 存 的 应 用 ， 需 要 同时 满足 下 列 要 求 。 
口 浏览 器 没有 缓存 描述 文件 。 如 果 浏 览 硕 在 本 地 绥 存 了 描述 文件 , 它 就 不 会 再 访问 Web 服 务 
希 去 找 新 描述 文件 。 在 是 否 绥 存 描述 文件 这 个 问题 上 ， 不 同 浏览 大 有 不 同 的 处 理 方 式 。 
有 的 浏览 妖 ( 比如 Chrome ) 只 要 有 条 件 就 会 检测 服务 磊 ， 看 有 没有 更 新 的 描述 文件 。 但 
Firefox 却 加 循 者 传统 的 HTTP 绥 存 规则 ， 会 将 描述 文件 缓存 一 段 时 间 。 所 以 ， 为 了 减少 及 
烦 ， 最 好 是 让 Web 服 务 器 明确 告诉 浏览 旨 ， 不 要 缓存 描述 文件 (参见 10.1.3 节 )。 
口 描述 文件 的 保存 日 期 必须 是 新 的 。 浏 览 右 在 检测 服务 右上 的 文件 时 ， 首 先 要 看 文件 的 最 
近 更 新 时 间 。 如 有 果 不 是 新 保存 的 描述 文件 ， 那 浏览 希 不 会 下 载 它 。 
口 描述 文件 中 的 内 容 要 更 新 。 如 果 浏 览 妖 下 载 了 新 描述 文件 ， 结 果 却 发 现 其 内 容 没 有 变化 ， 
它 同 样 会 停止 更 新 ， 而 继续 使 用 之 前 缓存 的 内 容 。 这 一 点 虽然 不 太 合 平 弟 理 ， 但 却 很 有 
ME PE, 重新 下 载 一 过 本 来 就 已 经 缓存 的 内 容 ， 既 耽误 时 间 又 浪费 市 完 ， 所 以 浏览 
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iE ELIT AA PRI 

如 果 你 一 直 都 在 认真 领会 前 面 的 内 容 , 到 这 里 可 能 会 冒 出 一 个 问题 来 : 要 是 描述 文件 确实 没 
有 什么 好 改 的 〈 因 为 你 并 没有 添加 任何 文件 )， 而 我 又 想 让 浏览 套 更 新 缓存 内 容 怎 么 办 〈 因 为 原 
有 的 文件 内 容 有 变化 )? 这 时 候 , 你 得 稍微 修改 一 下 摘 述 文件 , 让 它 看 起 来 像 是 新 的 一 样 。 为 此 ， 
最 好 的 办 法 就 是 洪 加 注释 ， 比 如 : 

CACHE MANIFEST 

# version 1.00.001 

# pages 

PersonalityTest.html 

PersonalityTest Score.html 














# styles & scripts 
PersonalityTest.css 
PersonalityTest.js 


# pictures & fonts 
Images/emotional bear.jpg 
Fonts/museo slab 500-webfont.eot 
Fonts/museo slab 500-webfont.woff 
Fonts/museo slab 500-webfont.ttf 
Fonts/museo slab 500-webfont.svg 


SE PARE EDU], ENARA, REAS HP RI JUS 7 13023 1.00.0023 047. T o 这样， 
既 可 以 强制 让 浏览 妖 更 新 已 有 内 容 ， 也 可 以 记录 目 己 更 新 的 次 数 。 

更 新 并 不 会 瞬间 完成 。 浏 览 硕 发 现 新 描述 文件 后 ,会 悄悄 地 下 载 所 有 文件 ,然后 再 用 新 下 载 
的 文件 代 符 原来 缓存 的 内 容 。 下 次 用 户 再 访问 同一 个 页 面 〈 或 刷新 该 页 面 )， 就 会 显示 新 内 容 。 
如 果 你 想 让 用 户 马 上 就 切换 到 新 下 载 的 内 容 ， 可 以 使 用 10.2.4 节 介绍 的 JavaScript 技 术 。 




















注意 不 能 以 只 更 新 增 量 的 方式 更 新 离线 应 用 。 只 要 应 用 中 有 变化 ， 浏 览 器 就 会 抛弃 所 有 间 文 
件 ， 然 后 重新 下 载 一 遍 ， 包 括 丝 党 未 改 的 那些 文件 。 


清除 浏览 器 缓存 

测试 离线 应 用 时 ， 手工 清除 浏览 器 缓存 的 作用 很 明显 。 这 样 ， 不 必修 改 描述 文件 ， 也 可 
以 测试 更 新 后 的 应 用 。 

所 有 浏览 器 部 提供 了 清除 缓存 的 命令 , 但 却 把 它们 “ 藏 ”在 了 不 同 的 地 方 。 有 的 浏览 器 会 
记录 每 个 离线 应 用 使 用 的 空间 (参见 图 10-3 )。 这 样 ， 你 就 可 以 确定 哪个 应 用 缓存 失败 了 ， 比 
如 没有 列 出 来 的 或 者 缓存 大 小 没有 预期 那么 大 的 。 当 然 , 这 样 也 可 以 一 个 应 用 一 个 应 用 地 删除 
缓存 文件 ， 做 到 互 不 影响 。 
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10-3: 上 :在 Firefox 中 ,选择 Options> 
T) S gE| Fe Advanced， 然 后 选择 Netwotk 选 项 卡 。 
Eee 可 以 看 到 每 个 网 站 使 用 的 缓存 空间 , 

General| Network Update | Encryption | 也 可 以 ; /月 青 除 任何 网 站 的 缓存 一 一 选择 
Connecion 该 网 站 ， 再 单 击 Remove 即 可 。 图 中 显 
Configure how Firefox connects to the Internet ings... zs HBILRZCE f —7 3g, XU M ES 

的 域 是 localhost ( 也 就 是 当前 计算 机 
的 测试 服务 器 ) 。 下 : 要 在 Chrome 中 











Offline Storage 
Your cache is currently using 54.1 MB of disk space 


[^] Override automatic cache management 看 到 类 似 的 信 息 , 可 以 在 地 让 术 = rH 输 


Limit cacheto | 1024 MB of space 入 : about:appcache-internals 


Tell me when a website asks to store data for offline Use 


The following websites have stored data for offline use: 
: localhost 














/ [| AppCache Internals 


€ Q © chrome://appcache-internals ph af 


^ 


Manifest: http-//localhost/personality manifest 


e Sizə: 43.7 kB 

e Creation Time: Tuesday, May 10, 2011 5:35:23 PM 

e Last Access Time: Tuesday, May 10, 2011 5:35:31 PM 
èe Last Update Time: Tuesday, May 10, 2011 5:35:23 PM 








Manifest: http-//sinuousgame.com/cache.manifest 


Ramana thic AnnCacha 





10.1.5 ”浏览 器 对 离线 应 用 的 支持 情况 


相信 大 家 都 已 经 知道 了 ， 除 了 拖 HTMLS 后 腿 的 正 ， 所 有 主流 浏览 器 都 支持 离线 应 用 。 有 的 
浏览 硕 很 早 就 开始 文 持 离线 应 用 了 ， 目 前 可 以 确定 有 Firefox 、Chrome 和 Safari。 表 10-1 列 出 了 有 具 
体 版 本 信息 。 
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表 10-1 浏览 器 对 离线 应 用 的 支持 情况 
IE Firefox Chrome Safari Opera Safari iOS Android 
最 低 版 本 一 3.5 5 4 10.6 2.1 2 


可 是 , AP Ie] ou a S SEI 2I HII 2E CHILD — RE S 最 重要 的 不 一 样 是 它们 分 配给 离线 应 用 
的 存储 空间 。 这 个 差别 非常 重要 ， 因 为 它 决 定 了 哪些 网 站 可 以 做 成 离线 应 用 ， 而 哪些 不 能 (参见 
10.1.2 节 )。 

有 没有 让 不 文 持 离线 应 用 的 浏 览 希 (如 IE9 ) 文 持 它 的 办 法 呢 ? 没有 什么 值得 答 试 的 好 办 法 。 
不 过 ， 这 并 不 妨碍 你 使 用 离线 应 用 功能 。 毕 葛 ， 离 线 应 用 只 是 一 个 补充 而 已 。 

不 文 持 离线 功能 的 浏 览 硕 照样 可 以 访问 你 的 网 站 ， 只 要 能 上 网 就 行 。 对 于 那些 需要 离线 浏览 
的 人 ， 比 如 经 背 出 差 的 人 ， 他 们 上 自己 会 找 一 个 支持 离线 功能 的 浏览 需 ， 以 备 没 有 网 络 时 使 用 。 


10.2 ”实用 缓存 技术 


到 现在 为 止 ,我 们 已 经 介绍 了 把 一 组 页 面 和 资源 打包 成 离线 应 用 的 方法 。 期 间 , 我 们 学 习 了 
如 何 编写 和 更 新 描述 文件 ， 以 及 如 何 让 浏览 如 不 要 忽视 我 们 的 劳动 成 果 。 利 用 这 些 知 识 , 很 容易 
做 出 一 个 简单 的 离线 应 用 来 。 可 是 ， 要 实现 复杂 一 些 的 站 点 的 离线 功能 ， 仅 有 这 些 知 识 还 不 够 。 
比如 ， 我 们 想 让 某 些 内 容 在 线 ， 而 在 离线 时 将 它们 符 换 成 其 他 页 面 ， 这 了 驶 涉及 如 何 《〈 在 代码 中 ) 
判断 计算 机 是 否 处 于 联网 状态 。 在 接 下 来 的 几 市 中 ， 我 们 就 来 学 习 怎 样 编写 更 乔 能 的 描述 文件 ， 
怎样 通过 简单 的 JavaScript 检 测 设备 在 线 状 态 。 


10.2.1 访问 未 缓存 的 文件 


经 过 前 面 的 学 习 , 我 们 知道 浏 顺带 在 缓存 了 攻 个 页 面 后 , 它 就 不 会 责问 Web 服 务 天 发 送 请 求 ， 
而 是 百 接 使 用 缓存 的 页 面 。 但 你 知道 吗 , 浏览 锅 对 离线 页 面 的 所 有 将 源 也 持 同 样 的 态度 ,无 论 它 
是 否 缓存 了 这 些 资源 。 

比如 ,假设 有 个 页 面 使 用 了 两 张 图 片 ， 标 记 如 下 : 


«img src-"Images/logo.png" alt="Personality quiz"> 
«img src-"Images/emotional bear.jpg" alt-"Sad stuffed bear"» 


He, düxBonfp ROECRIU WR ArT Y — KEI : 
CACHE MANIFEST 


PersonalityTest.html 
PersonalityTest Score.html 


















































PersonalityTest.css 
PersonalityTest.js 


Images/emotional bear.jpg 

有 读者 认为 ,浏览 器 会 从 缓存 中 取得 emotional bearpng， 然 后 (在 计算 机 联网 的 情况 下 ) 从 
Web 服 务 从 上 取得 logo.png。 年 竞 ， 过 去 的 经 验 告诉 我 们 ， 在 从 绥 存 的 页 面 中 访问 未 缓存 的 页 面 
时 ,浏览 各 就 会 这 样 做 。 可 是 对 于 离线 应 用 来 说 ,没有 这 回 事 儿 。 事 实 上 ， 无论 什 么 浏览 旧 ， 虱 














270 | 第 10 章 离线 应 用 


会 从 缓存 中 取得 emotional bearpng， 而 忽略 未 绥 存 的 logo.png 并 显示 未 找到 文件 的 图 标 或 者 一 块 
FAKER, BEERTA, PAFA ERE 

要 想 解 决 这 个 问题 ， 必 须 在 描述 文件 中 添加 一 个 区 块 。 这 个 区 块 的 开头 冠 以 “NETWORK:” 
字样 ， 然 后 紧 跟 着 一 组 必须 在 线 访 问 的 页 面 : 

CACHE MANIFEST 


PersonalityTest.html 
PersonalityTest Score.html 





PersonalityTest.css 
PersonalityTest.js 
Images/emotional bear.jpg 


NETWORK: 

Images/1logo.png 

JURE, ERRAT, DPI] zz AA WebllRAr 2s Pzlogo.pngocfr, MERR, DUANE. 

此 时 , 你 可 能 会 想 : 为 什么 要 把 不 想 缓存 的 文件 都 给 列 出 来 呢 ? 或 许 是 因为 缓存 空间 有 限 的 
原因 ， 比 如 为 了 不 让 缓存 超 过 5 MB ， 你 可 能 会 考 感 不 让 浏览 融 绥 人 存 那 些 大 文件 。 

但 更 有 可 能 是 这 些 内 容 不 能 绥 存 ， 比 如 跟踪 脚本 或 动态 生成 的 广告 。 此 时 ,最 简单 的 办 法 是 
在 “NETWORK:” 区 块 中 使 用 一 个 通配符 ， 即 星 号 〈*)。 这 样 浏 览 硕 就 知道 所 有 未 绥 存 的 内 容 
都 必须 联网 访问 : 

NETWORK: 

男 外 ,还 可 以 使 用 星 号 匹配 任意 类 型 的 文件 ( 比如 ，*.jpg 匹 配 所 有 JPEG 图 片 ), 或 者 位 于 特 
定 服务 种 上 的 所 有 文件 ( 比如, http:z//www.google-analytics.com/*U LU fiGoogle Analytics 域 中 的 所 有 
AT e 

















注意 ”既然 可 以 使 用 通配符 ， 那 在 缓存 文件 列表 中 使 用 它 可 以 吗 ? 这 样 不 必 逐 个 罗列 ， 就 可 以 
缓存 一 大 批文 件 了 。 很 这 憾 ， 缓 存 文件 列表 不 支持 通配符 ， 因 为 HTML5 规 范 制定 者 担心 
有 人 会 无 意 中 缓存 庞大 的 站 点 。 


10.2.2 ”添加 后 备 内 容 


我 们 知道 ， 利 用 描述 文件 可 以 告诉 浏览 絮 哪 些 文件 要 缓存 ， 哪 些 文件 要 从 Web 服 务 大 获 取 。 
除 此 之 外 ， 描 述 文件 还 支持 一 个 “FALLBACK:” 区 块 ， 这 里 列 出 的 文件 可 以 根据 计算 机 是 否 在 
线 而 互 换 。 

“FALLBACK:” 区 块 可 以 在 描述 文件 中 的 任何 地 方 出 现 , 但 要 每 行列 出 一 对 文件 来 。 第 一 个 
文件 名 是 在 线 时 使 用 的 文件 名 ， 第 二 个 文件 名 是 离线 后 备 文 件 名 。 


FALLBACK : 
PersonalityScore.html PersonalityScore offline.html 


浏览 融会 把 后 备 文 件 ( 即 这 里 的 PersonalityScore_offline.html ) 下 载 并 绥 存 起 来 。 不 过 ， 只 有 
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在 不 能 上 网 的 时 候 浏 览 器 才 会 使 用 这 个 后 备 文 件 。 而 在 能 上 网 的 时 候 ， 浏 览 器 会 照管 癌 Web 服 务 
人 妖 请 求 男 一 个 文件 ( 即 这 里 的 PersonalityScore.html )。 


注意 ”不必 为 了 让 Web 应 用 觉得 “离线 ”而 断 开 网 络 连接 。 实 际 上 ， 关 键 在 于 能 否 访问 到 服务 
器 ， 如 果 服 务 器 没有 响应 ，Web 应 用 就 会 认为 已 经 离线 了 。 


至 于 什么 时 候 该 使 用 后 备 内 容 ， 那 可 能 性 就 多 了 去 了 。 比 如 ,可 以 在 离线 时 让 浏览 絮 使 用 一 
个 简单 点 的 页 面 ， 其 中 的 脚本 与 在 线 页 面 中 的 不 同 , 或 者 使 用 了 更 少 的 资源 。 后备 内 容 放 在 哪儿 
都 可 以 ， 只 要 一 开始 加 上 “FALLBACK:” 就 可 以 : 


CACHE MANIFEST 
PersonalityTest.html 
PersonalityTest Score.html 





PersonalityTest.css 


FALLBACK: 

PersonalityScore.html PersonalityScore_offline.html 
Images/emotional_bear.jpg Images/emotional bear small.jpg 
PersonalityTest.js PersonalityTest offline.js 


NETWORK : 
* 


注意 ”在 描述 文件 中 ， 我 们 想 要 缓存 的 文件 位 于 CACHE 区 块 中 。 不 过 ， 除 非 你 想 要 在 另 一 个 区 
域 之 后 再 列 出 要 缓存 的 文件 ， 否 则 不 必 有 意 添 加 这 个 区 块 。 


后 备 内 容 区 块 也 支持 通配符 匹配 。 这 样 就 可 以 创建 一 个 内 置 的 错误 页 面 ， 比 如 : 


FALLBACK: 
/ offline.html 


假设 有 人 要 请 求 与 离线 应 用 在 同一 个 网 站 中 的 页 面 , 但 该 页 面 没有 在 缓存 中 。 如 果 计 算 机 在 
线 , 浏览 硕 就 会 联系 服务 需 取 得 该 页 面 。 如 果 计 算 机 不 在 线 ， 或 者 无 法 访问 网 站 ， 或 者 根本 就 没 
有 找到 请 求 的 页 面 ， 那 浏览 退会 显示 缓存 的 offline.html 页 面 ( 图 10-4 )。 














=| 图 10-4: 浏览 器 访问 的 ImaginaryPage.html 不 存在 ， 但 浏览 器 却 没 


| |.) Missing File 


| €, | o http//localhost/ImaginarnyPagehtm| — - C M 4 里 新 地 址 栏 , 此 用 户 无 从 知 EE 错误 页 面 到 JE 叫 什么 名 F 


u 











The file you entered does not exist in the cache. 


Also, it either: 


a. does not exist on the web server, or 
b. you are offline 
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在 前 面 的 例子 中 ,使 用 一 个 斜 杜 (/) RIEAN 94 RT ESEA WASH ASRI SUL, DR 
“NETWORK:” 区 块 的 通配符 是 星 号 。 不 过 ， 在 有 的 浏览 硕 ( 比如 Firefox ) 中 ,确实 可 以 在 后 备 
区 块 中 使 用 星 号 ， 而 这 就 意味 着 可 以 将 前 面 的 例子 重 写 为 这 样 : 


FALLBACK: 
* offline.html 


除了 使 用 通 配 答 ， 还 可 以 通过 指定 子 目录 来 匹配 更 小 范围 内 的 文件 : 


FALLBACK: 
http: //www.superAppsOnSteroids.org/paint app/* offline.html 


或 者 ， 也 可 以 指定 只 匹配 某 些 类 型 的 文件 : 


FALLBACK : 
*.jpg missig picture.jpg 


可 惜 的 是 ， 除 了 Firefox 之 外 ， 还 没有 别 的 浏览 融 能 理解 这 些 语 法 ， 至 少 现在 还 没有 。 














10.2.3 ”检测 连接 


SINAI, 使 用 JavaScript 检 测 浏览 融 当 前 是 否 在 线 的 一 个 诀 宕 ,就 是 利用 后 备 区 块 。 如 果 你 是 
一 位 JavaScript 老 手 , 可 能 知道 navigator.onLine 属 性 , 这 个 属性 能 够 告诉 你 浏览 器 当前 是 否 在 线 ， 
但 不 一 定 准 确 。onLine 属 性 的 问题 是 ， 它 只 真实 地 反映 浏览 希 “ 脱 机 工作 ”的 设置 ， 并 不 反映 计 
算 机 是 否 真 的 连 到 了 因特网 。 就 算 onLine 属 性 能 真实 反映 连接 情况 ， 它 也 不 会 告诉 你 浏览 硕 到 底 
是 没有 连接 到 Web 服 务 希 ， 还 是 由 于 种 种 原因 没有 下 载 到 网 页 。 

所 以 , 我 们 只 能 利用 后 备 区 块 , 让 浏览 硕 根 据 应 用 是 否 在 线 分 别 加 载 相 同 JavaScript 函 数 的 不 
同 版 本 。 为 此 ， 要 在 后 备 区 块 中 添加 如 下 文件 对 : 


FALLBACK: 
Ondine. 75 OTTLIiHe. 1s 


原始 的 网 页 引用 online.js: 


<!DOCTYPE html» 
«html lang-"en" manifest-"personality.manifest"» 
«head» 

«meta charset-"utf-8"» 

«title»...«/title» 

«script src-"online.js"»«/script» 


这 个 JavaSeript 文 件 包含 着 一 个 非常 简单 的 函数 : 10 — 
function isSiteOnline() ( 


return true; 


Í 
如 果 浏 览 融 没有 下 载 到 online.js， 就 会 使 用 offline.js， 后 者 包含 着 一 个 同名 因数 ， 但 返回 值 
不 同 : 


function isSiteOnline() { 
return false; 


j 
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在 原始 的 网 页 中 ， 为 了 知道 应 用 是 否 在 线 ， 检 测 这 个 isSite0nline() KEI] : 


var displayStatus = document.getElementById("displayStatus"); 
if (isSiteOnline()) { 


// (可 以 运行 依赖 上 网 的 任务 ， 比 如 通过 XMLHttpRequest 连 接 Web 服 务 器 ) 
displayStatus.innerHTML = "You are connected and the web server is online."; 


else { 


// (应 用 在 离线 运行 ， 需要 隐藏 或 修改 一 些 内 容 ， 或 者 禁用 某 些 功能 ) 
displayStatus.innerHTML = "You are running this application offline."; 


10.2.4 ”通过 JavaScript 指 定 更 新 


使 用 相对 有 限 的 JavaScript 接 口 可 以 与 离线 应 用 功能 交互 。 这 个 JavaScript 接 口 就 由 
applicationCacheX] 2g 4E XL; 

通过 applicationCache 对 象 的 status 属 性 ， 可 以 知道 浏览 硕 当 前 在 干什么 ， 是 在 检测 更 新 的 
描述 文件 ， 还 是 在 下 载 新 文件 ， 抑 或 在 做 其 他 事 。 这 个 属性 变化 很 快 ， 也 很 有 用 ; 同样 有 用 的 是 
与 不 同属 性 值 对 应 的 事件 (参见 表 10-2 )， 这 些 事件 会 在 applicationCache 的 状态 变化 时 触发 。 


表 10-2 缓存 事件 











事 件 说 明 

onChecking 浏 览 器 在 发 现 网 页 中 的 manifest 属 性 时 , 会 触发 这 个 事件 ， 并 向 Web 服 务 如 请 求 描述 文件 

onNoUpdate 如 打 剖 览 右 已 经 下 载 了 描述 文件 ， 而 描述 文件 并 未 改变 ， 训 览 器 就 会 触发 这 个 事件 ， 然 后 
不 再 做 什么 了 


onDownloading 浏览 右 在 开始 下 载 描述 文件 〈 以 及 其 中 列 出 的 文件 ) 之 前 会 触发 这 个 事件 。 除了 第 一 次 下 
载 描述 文件 时 ， 更 新 文件 时 都 会 触发 这 个 事件 


onProgress 下 载 文件 期 间 ， 阐 览 右 会 不 断 地 触发 这 个 事件 ， 以 报告 进度 
onCached 当 新 离线 应 用 的 所 有 文件 都 下 载 完毕 后 ， 会 触发 这 个 事件 。 此 后 ， 不 会 再 发 生 事件 








onUpdateReady 这 个 事件 表示 已 经 取得 了 更 新 的 内 容 。 此 时 ， 新 内 容 已 经 可 以 使 用 了 ,但 除非 重新 加 载 页 
面 ， 否 则 不 会 在 剂 览 器 窗口 中 出 现 。 此 后 ， 不 会 再 发 生 事 件 

onError 缓存 期 间 发 生 任 何 问 题 都 会 触发 这 个 事件 。 可 能 是 无 法 连接 Web 服 务 器 (这 种 情况 下 ， 会 
把 页 面 切换 到 离线 训 览 模式 ) ， 或 者 描述 文件 包含 错误 的 语法 ， 或 者 缓存 的 资源 不 存在 。 
此 后 ， 不 会 再 发 生 事件 


onübsolete 在 检测 更 新 时 ， 浏 览 器 发 现 描述 文件 不 存在 了 , 就 会 触发 这 个 事件 。 然 后 ， 它 会 清除 缓存 。 
下 次 再 加 载 页 面 时 ， 浏 览 器 会 从 Web 服 务 器 取得 实时 、 最 新 的 在 线 版 页 面 


注意 在 写作 本 书 时 ， 每 个 浏览 器 对 缓存 事件 的 支持 情况 并 不 完全 相同 。 比 如 ，Firefox 会 忽 
略 onChecking 和 onUpdateReady 这 两 个 有 用 的 事件 ， 但 却 会 触发 onNoUpdate 和 onError 
事件 。 











这 里 面 最 有 用 的 事件 是 onUpdateReady， 表 示 浏 览 硕 已 经 下 载 7 新 版 本 的 应 用 。 即 使 新 版 本 
已 经 可 以 使 用 了 , 但 浏览 絮 窗 口中 显示 的 仍然 是 旧版 本 的 内 容 。 些 时 ,可 以 利用 这 个 事件 告诉 访 
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客 刷新 页 面 ， 浏 览 新 版 本 的 内 容 ， 就 像 虹 面 应 用 下 载 完 更 新 之 后 所 做 的 那样 : 


<script> 
window.onload = function() { 


// 给 onUpdateReady 事 件 注 册 事 件 处 理 程序 | 
applicationCache.onupdateready = function() { 
var displayStatus = document.getElementById("displayStatus"); 
displayStatus.innerHTML = "There is a new version of this application. ”+ 
"To load it, refresh the page."; 


Í 
</scřipts 
要 不 ， 也 可 以 使 用 window.location.reload() 方 法 ， 在 用 户 确认 后 重新 加 载 页 面 
«script» 


window.onload = function() ( 


applicationCache.onupdateready = function() { 
if (confirm( 
"A new version of this application is available. Reload now?")) { 
window.location.reload(); 


j 
j 


</script> 


图 10-$ 展 示 了 这 段 代码 的 运行 结果 。 


图 10-5: 如 果 访 客 单 击 OK， 应 用 就 会 重新 加 
载 当 前 页 面 ， 显 示 更 新 后 的 内 容 (EW, T 
次 再 打开 这 个 页 面 或 者 刷新 页 面 之 后 ， 才 会 
出 现 新 内 容 ) 


- e e ,0 8 | have a rich vocabulary. 
D a BO 5: 


Fh £» ES Bh FR Onna fnnl at nore 





除了 status 属 性 和 上 述 事 件 之 外 ，applicationCache 对 销 还 有 两 个 方法 : update() 和 
swapCache()。 其 中 ,update() 方 法 的 名 字 有 点 含糊 ,实际 上 调用 它 只 会 让 浏览 兹 检测 是 否 有 新 的 
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描述 文件 。 如 末 有 ， 浏 览 需 就 会 在 后 侣 下 载 新 文件 ; 否则 ， 什 么 也 不 做 。 

虽然 浏览 句 能 目 动 检测 更 新 ,但 你 也 可 以 调用 update() 方 法 让 它 去 检测 ， 以 便 及 时 发 现 更 新 
的 描述 文件 。 这 个 方法 很 适合 那些 生命 期 长 的 Web 应 用 ， 比 如 一 打开 就 是 一 整 天 的 页 面 。 

第 二 个 方法 是 swapCache() ， 用 于 告诉 浏览 融 开 始 使 用 新 缓存 的 内 容 一 一 如 果 它 已 经 下 载 完 
了 更 新 。 然 而 ，swapCache() 方 法 不 会 影响 当前 显示 的 页 面 ; 要 让 当前 页 面 显示 新 内 容 ， 必 须 重 
新 加 载 它 。 那 swapCache() 还 有 什么 用 呢 ? 通过 切换 到 新 缓存， 此 后 加 载 的 所 有 内 容 〈 比如 动态 
加 载 的 图 片 )， 都 会 从 新 绥 存 〈 而 不 是 旧 绥 存 ) 中 取得 。 如 果 人 处 理 得 好 ， 利 用 swapCache() 既 可 以 
证 页 面 访问 新 内 容 ， 又 不 必 强 制 完 全 重 载 〈 同时 也 就 不 会 把 当前 应 用 重 置 为 初始 状态 )。 但 在 大 
多 数 应 用 中 ， 使 用 swapCache() 还 是 弊 大 于 利 ， 有 时 候 会 造成 混用 新 、 旧 缓存 的 问题 。 



































276 | 第 10 章 离线 应 用 





与 Web 服 务 器 通信 


书 一 开始 先 介 绍 了 HTML5 中 与 标记 有 关内 容 ( 如 语义 元 素 、Web 表 单 和 视频 ) fH BG 

学 习 的 深入 , 我 们 逐渐 接触 了 网 页 编程 技术 ,以 及 HTML5 中 与 JavaScript 密 切 相 关 的 知 
识 。 这 一 曹 , 我 们 进一步 探讨 网 页 编程 技术 , 不 仅 会 涉及 JavaScript 人 代码， 而且 会 有 服务 器 端 编程 
代码 ( 即 编写 在 Web 服 务 絮 上 运行 的 程序 )， 但 与 服务 融 端 编程 语言 无 关 。 

讨论 服务 万 端 编 程 有 一 个 问题 。 一 方面 ， 选 择 什么 语言 并 不 重要 ， 只 要 它 能 操作 纯 HTMEL5 
页 面 即 可 (所 有 服务 需 端 语言 都 可 以 ), 男 一 方面 , 深入 讲解 一 门 你 并 没 打 算 使 用 的 或 者 你 的 Web 
主机 根本 不 支持 的 语言 ,也 没有 什么 必要 。 WMH, 全 面 讲解 PHP、ASPNET Ruby, Java, Python 
等 服务 器 编程 的 好 书 多 得 是 。 

本 章 讨 论 的 问题 需要 的 服务 器 端 代 码 并 不 多 , 也 不 难 懂 。 我 们 的 设想 是 让 这 些 代 码 刚好 人 够 演 
示 每 个 HTMLS 功 能 ， 能 人 够 与 网 页 中 的 JavaScript 代 码 配合 。 对 于 你 上 自己 开发 的 项 目 ， 可 能 得 修改 
并 扩展 本 章 的 示例 ， 从 而 满足 你 目 己 的 需要 ， 或 者 适应 你 自己 喜爱 的 语言 。 

说 了 半天 ， 到 底 是 什么 功能 需要 用 到 服务 顺 端 编程 呢 ? HTML5 为 网 页 与 服务 絮 通 信和 提供 了 
两 种 方式 。 第 一 种 方式 是 服务 器 发 送 的 事件 ( server-sent event )， 让 Web 服 务 需 能 够 定时 给 网 页 发 
送 消息 。 第 二 种 方式 是 Web Socketff£Zg , 让 浏览 需 与 Web 服 务 需 能 够 随心 所 欲 地 双 辐 通信 。 不 过 ， 
在 讨论 HITMLS 的 这 两 项 新 功能 之 前 ， 我 们 要 先 讲 一 讲 当 前 广泛 使 用 的 服务 需 通 信 机 制 ， 即 
XMLHttpRequestX] 4 。 



































注意 ”服务 器 发 送 的 事件 与 Web Socket 可 不 像 看 起 来 那么 简单 。 要 学 会 使 用 和 编写 简单 的 例子 
(本章 的 例子 都 是 简单 的 例子 ) 不 难 。 但 要 利用 它们 构建 一 些 专业 网 站 中 的 功能 ， 那 可 就 
是 另外 一 码 事 儿 了 。 关 键 在 于 ， 要 在 网 站 中 实现 这 些 功 能 ， 必 须 得 有 足够 丰富 的 服务 器 


端 编 程 经 验 。 


11.1 m Web 服务 器 发 送 消 轧 
在 学 习 HTML5 提 供 的 与 服务 器 通信 的 新 功能 之 前 ， 必 须 先 了 解 此 前 与 服务 器 通信 的 技术 。 


当然 ， 我 们 想 要 说 的 就 是 XMLHttpRequest 这 个 不 可 或 缺 的 JavaScript 对 象 ， 页 面 利用 它 与 Web 服 务 
佑 通 信 。 如 果 读 者 了 解 XMLHttpRequest 对 象 ( 而 且 也 在 使 用 它 ), 可 以 跳 过 这 部 分 内 容 。 不 过 , dE 
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如 你 一 二 都 在 从 事 静 态 网 页 设计 ， 最 好 是 谈 一 该 本 让。 








与 Web 服 务 器 通信 的 历史 

Web 诞生 初期 ， 与 服务 器 通信 是 一 件 很 简单 、 很 平常 的 事 儿 。 浏 览 器 请 求 网 页 ， 然 后 服务 
器 发 回响 应 。 仅 此 而 已 。 

ER, 软件 公司 的 一 些 人 想 出 了 新 点 子 。 他 们 设计 了 服务 器 端 工 具 , 在 第 一 步 ( 请求 网 页 ) 
和 第 二 步 (返回 页 面 ) 之 间 插 入 一 些 代码 。 这样 做 是 为 了 动态 地 修改 页 面 ( 比如 在 页 面 中 间 插 
入 一 段 标 记 )， 甚 至 是 生成 一 个 新 页 面 ( 比如 从 数据 库 中 读 取 数据 ， 然 后 生成 特定 的 产品 详细 
信息 页 )。 

可 是 ，Web 开发 人 员 的 目标 更 高 , 希望 构建 交互 性 更 强 的 页 面 。 服务 器 端 编程 也 可 以 做 到 
这 一 点 , 但 实现 起 来 有 点 费劲 , 而且 浏览 器 必须 不 断 刷 新 页 面 。 比 如， 向 购物 车 中 添加 一 件 商 
品 ， 单 击 提 交 按 钮 可 以 提交 当前 页 面 (使 用 第 4 章 介绍 的 表单 )， 请求 一 个 新 页 面 。Web 服务 
器 可 以 发 回 同一 个 页 面 ， 也 可 以 发 回 一 个 不 同 的 页 面 ( 比 如， 显示 购物 车 中 商品 的 新 页 面 )。 
这 样 当 然 也 很 好 ， 可 就 是 有 点 烦琐 。 

Web 开发 人 员 的 要 求 又 提高 了 ， 他 们 想 实现 更 流畅 的 Web 应 用 (比如 电子 邮件 程序 )， 而 
不 是 反复 发 送 页 面 并 且 从 头 生 成 所 有 内 容 。 实 现 这 个 想法 的 一 组 技术 叫 Ajax， 其 中 涉及 一 个 
叫 XMLHttpRequest 的 JavaScript X] $-, 使 用 这 个 对 象 ， 网 页 可 以 直接 与 Web 服务 器 通信 , 发 送 
数据 ， 取 得 响应 ， 不 必 整 体 提 交 或 刷新 。 这 样 就 让 JavaScript 真正 具备 了 处 理 网 页 的 能 力 ， 包 
括 更 新 页 面 内 容 。 而 且 ， 这 种 网 页 看 起 来 会 更 流畅 ， 反 应 也 更 快 。 


11.1.1 XMLHttpRequest 对 象 














实现 网 页 与 Web 服 务 紫 直接 对 话 的 关键 是 XMLHttpRequest 对 象 。 这 个 对 象 最 早 是 由 微软 创造 
的 ,当时 是 想 通过 它 改进 Outlook 电 子 邮件 程序 的 web 版。 但 后 来 , 所 有 现代 浏览 大 都 实现 了 这 个 
对 象 。 今 天 ，XMLHttpRequest 对 象 已 然 成 为 大 多 数 现代 Web 应 用 的 基础 。 
XMLHttpRequest 对 象 的 基本 思想 是 让 JavaScript 代 码 目 己 发 送 请 求 ， 以 便 随时 获取 数据 。 这 种 
请 求 是 异步 的 , 也 承 是 说 请 求 期 间 网 页 仍然 能 啊 应 用 户 操作 。 事 实 上 ,网 页 用 户 根本 不 会 注意 到 
后 人 台 发 送 了 请 求 ( 除非 页 面 上 会 显示 某 些 消息 或 进度 条 )。 
XMLHttpRequest 对 象 非 常 适 合 从 Web 服 务 硕 取得 某 些 数据 ， 下 面 是 一 些 例子 。 
OQ 保存 在 服务 器 上 的 数据 。 包 括 文件 中 的 数据 或 数据 库 中 的 数据 ( 如 产品 或 客户 记录 )。 
口 只 有 服务 器 才能 完成 计算 的 数据 。 服 务 需 可 以 执行 复杂 代码 ， 完 成 复杂 计算 。 虽 然 在 客 
户 站 用 JavaScript 也 能 执行 相同 计算 ， 但 却 不 一 定 合 适 。 有 时 候 是 因为 JavaScript 的 数据 计 
算 功 能 没有 那么 强大 ， 或 者 客户 端 不 容易 得 到 要 拿 来 计算 的 数据 。 有 时 候 是 因为 数据 非 
第 机 窗 ， 必 须 防止 别人 偷 看 或 者 算 改 。 还 有 时 候 是 因为 计算 量 极 大 ( 像 演 染 3D 场 景 )， 客 
户 冉 计算 机 不 可 能 像 高 配置 的 Web 服 务 融 处 理 速度 那么 快 。 在 这 些 情 况 下 ， 让 Web 服 务 需 


完成 计算 是 最 合适 的 。 
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OQ Rt AWebBR3s ss 8923198 «REI P9 VLA BE ELBEVI RIA Webll i rr E HJ S 但是, 你 
可 以 (通过 XMLHttpRequest ) 调用 目 己 Web 服 务 硕 上 的 程序 ， 让 它 帮 你 从 其 他 服务 硕 取 得 
数据 ， 然 后 再 交 给 你 。 

要 想 真 下 理解 XMLHttpRequest， 最 好 的 办 法 就 是 实际 地 使 用 它 。 接 下 来 几 市 会 展示 两 个 简单 

的 例子 。 








11.1.2 ”向 Web 服 务 器 提问 


图 11-1 展 示 了 一 个 页 面 , 可 以 让 服务 硕 做 简单 的 算术 题 。 这 个 表单 的 数据 是 通过 XMLHttpRequest 
对 和 象 发 送 的 。 








图 11-1: 单 击 Ask the Server 按 钮 ， 网 页 就 会 创建 一 
个 XMLHttpRequest 对 象 ， 把 两 个 数 发 送 到 服务 器 。 
服务 器 上 有 一 个 简单 的 脚本 ， 计 算出 结果 后 会 返 
Enter two numbers: 34 16 回 结果 ( 见 图 11-2 ) 








To ask the server to add them, without refreshing the page, clic« this 


button: | Ask the oer 


The request has been sent. 














TE B £X VL BLZ BU, JUS ES RRA mA, HRR EER A ( 也 就 是 用 户 
输入 的 两 个 数值 )， 然 后 返回 结果 。 这 个 简单 的 任务 是 有 史 以 来 的 任何 一 门 服务 融 端 编程 语言 都 
可 以 胜任 的 〈 发 送 一 点 点 文本 内 容 ， 总 比 发 送 一 个 完整 的 HTML 文档 要 简单 多 了 )。 我 们 这 个 例 
子 用 的 是 PHP 脚 本 ， 主 要 因为 PHP 相 对 人 简单 ， 几 乎 所 有 网 站 托管 公司 都 文 持 它 。 

1. 创建 脚本 

创建 PHP 脚 本 的 第 一 件 事 儿 是 创建 一 个 文本 文件 。 在 这 个 文件 里 ， 先 写 出 如 下 所 示 的 一 个 好 
玩 的 代码 块 ， 这 样 就 确定 了 脚本 的 起 始 和 结束 位 置 .: 

















<?php 
// 这 里 是 脚本 代码 
?> 
我 们 这 个 例子 的 脚本 代码 很 简单 ， 就 这 么 几 行 代码 : 
«?php 


$num1 = $ GET['number1']; 
$num2 - $ GET['number2']; 
$sum = $num1 + $num2 
echo($sum); 

?> 
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就 算 你 不 是 一 个 PHP 专 家 ,一 看 也 该 知道 这 儿 行 代码 能 做 什么 。 一 开始 当然 是 取得 网 页 发 送 
过 来 的 两 个 数值 : 


$num1 = $ GET['number1']; 
$num2 = $ GET['number2']; 


美元 ”只 是 一 个 $ 符 号 而 已 。 这 里 的 $ 可 不 表示 钱 ， 在 PHP 中 它 表示 变量 名 。 换 句 话 说 ， 这 两 
行 代码 声明 了 两 个 变量 : $num1 和 $num2。 为 了 给 它们 赋值 ， 代 码 从 内 置 的 集合 $_GET 中 取得 数据 。 
$ GET 集合 中 保存 着 请 求 这 个 脚本 的 URL 中 包含 的 所 有 信息 。 

还 是 看 个 例子 吧 。 如 果 你 把 这 个 PHP 脚 本 放 在 一 个 名 为 WebCalculatorphp 的 文件 中 ， 然 后 向 
它 发 送 了 如 下 请 求 : 

http: //www.magicalXMLHttpRequestTest.com/WebCalculator.php?numberi-34&number2-46 

在 这 里 , 这 个 URL 的 末尾 附加 了 两 个 信息 ( 包含 这 两 个 信息 的 URL 中 的 这 一 段 , 叫做 查询 字 
符 串 ) 。 首 先 ， 是 一 个 名 为 number1 的 值 ， 该 值 为 34; 接 下 来 是 名 为 number2 的 值 ， 该 值 为 46。 这 
两 个 值 前 面 的 问号 (? ) 表示 查询 字 符 串 的 开头 ， 碍 询 字 符 串 中 的 和 号 〈 久 ) 用 于 分 隔 每 个 名 值 
对 。PHP 引 擎 接收 到 请 求 后 ， 会 把 查询 字符 串 中 的 值 保存 到 $_GET 集 合 中 ， 以 方便 脚本 代码 访问 。 
(大 多 数 服 务 硕 病 脚 本 声言 午 文 持 类 似 的 数据 模型 。 比 如 ，ASP 会 把 相同 的 信息 保存 在 
Request .0OueryString 集 合 中 。) 























注意 HTML 老手 知道 向 Web 服 务 器 发 送 数据 有 两 种 方式 ,一 种 是 像 这 样 通 过 查询 字符 串 ， 另 一 
种 是 把 数据 放 在 请 求 的 消息 体 中 。 无 论 采 取 哪 种 方式 ， 数 据 编码 不 变 ， 而 且 在 服务 器 端 
访问 这 些 数据 的 差别 也 不 大 。 有 具体 来 说 ,访问 消息 体 中 的 数据 , 在 服务 器 端 要 访问 $_ POST 
集合 ， 而 不 是 $ GET 集 合 。 


PHP 脚 本 得 到 这 两 个 数值 后 ， 会 把 它们 加 起 来 : 

$sum = $num1 + $num2 

最 后 一 步 就 把 计算 结果 返回 发 送 请 求 的 网 页 。 可 以 把 结果 打包 放 在 一 段 H8TML 标 记 中 ， 其 至 
可 以 格式 化 为 XML。 不 过 我 们 这 个 例子 不 必 搞 这 么 复杂 ， 因 为 纯 文本 就 是 够 了 。 但 无 论 是 有 格 
式 的 ， 还 是 没有 格式 的 ， 返 回 数据 都 一 样 要 调用 PHP 的 echo 命 令 : 

echo($sum ) ; 

驶 这 么 多 ， 总 共 才 4 行 PHP 代 码 。 可 是 ， 避 赁 这 4 行 代码 已 经 足以 文 撑 B/S 模 式 了 : 2a 
送 请 求 ，Web 服 务 器 返回 结 











注意 能 否 用 JavaScript 来 写 这 个 例子 而 不 用 向 Web 服 务 器 发 送 请 求 呢 ? 当然 可 以 。 不 过 ， 这 


器 发 送 请 
个 例子 的 重点 并 不 在 于 展示 简单 计算 ,关键 是 我 们 想 通 过 它 来 说 明 服务 器 也 可 以 完成 计 
算 任务 。 而 且 , 无 论 PHP 脚 本 写 得 多 复杂 ， 浏 览 器 与 服务 器 交换 数据 的 基本 模式 永远 不 
人 zl 
A X o 
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2. 请 求 服务 器 
第 二 步 就 是 构建 使 用 刚才 PHP 脚 本 的 页 面 , 这 里 要 用 到 XMLHttpRequest 对 象 。 其 实 非常 简单 ， 
在 脚本 代码 中 ， 我 们 要 创建 一 个 XMLHttpRequest 对 象 ， 以 便 在 所 有 函数 中 访问 它 : 


var req = new XMLHttpRequest(); 
在 用 户 单 击 Ask the Server 按 钮 时 ， 会 调用 askServer() ŽI: 


«div» 
<p>Enter two numbers: 
«input id-"numberi" type-"number"» 
«input id-"number2" type-"number"» 
</p> 
«p»To ask the server to add them, without refreshing the page, click 
this button:«button onclick-"askServer()"^»Ask the Server«/button» 
</p> 
</div> 
<p id="result"></p> 


jx askServer () KZE H]XMLHttpRequesto] RER ERIS. Boc. AARAA 
需 的 数据 一 一 两 个 数值 : 


function askServer() { 
var number1 = document.getElementById("number1").value; 
var number2 - document.getElementById("number2").value; 


然后 ， 使 用 这 两 个 数值 构建 一 个 查询 字符 串 : 

var dataToSend = "?number1=" + Number1 + "&number2-" + number2; 

接 下 来 该 准备 发 送 请 求 了 。 调 用 XMLHttpRequest 对 象 的 open() 方 法 是 第 一 步 。 这 个 方法 接收 
三 个 参数 : HITP 操 作 类 型 《GET 或 POST )、 作 为 请 求 目 标的 URL 和 表示 浏览 右 是 否 异步 工作 的 
布尔 值 ( true 或 false ): 


req.open("GET", "WebCalculator.php" + dataToSend, true); 























注意 说 到 第 三 个 参数 ,懂行 的 读者 可 能 会 不 禁 担 心 起 来 :“open() 的 最 后 一 个 参数 应 该 只 传 入 
true 啊 ， 就 要 是 打开 异步 工作 模式 。” 没 错 ， 因 为 我 们 不 能 保证 接收 请 求 的 网 站 完全 没有 
问题 ， 如 果 打 开 同 步 工 作 模 式 〈( 即 强制 代码 停止 执行 ， 一 直 等 到 服务 器 响应 ) 可 能 会 因 
为 等 不 到 响应 而 导致 网 页 前 溃 。 


在 真正 发 送 请 求 之 前 ， 还 必须 为 XMLHttpRequest 对 象 的 onReadyStateChange 事 件 指定 处 理 程 
序 。 只 要 服务 右 返 回信 息 ， 束 会 触发 这 个 事件 ， 其 中 包括 返回 啊 应 数据 : 

req.onreadystatechange = handleServerResponse; 

然后 ， 就 可 以 调用 XMLHttpRequest 的 send() 方 法 实际 地 发 送 请 求 了 。 因 为 是 异步 请 求 ， 所 以 
后 面 的 代码 会 泽 跟 者 执行 ， 不 会 仿 顿 。 而 我 们 获得 啊 应 的 唯一 途径 萄 是 通过 onReadyStateChange 
事件 ， 而 该 事件 稍 后 才 会 触发 : 
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req.send(); 

j document.getElementById("result").innerHTML = "The request has been sent."; 

在 接收 啊 应 时 ， 需 要 首先 检测 XMLHttpRequest 的 两 个 属性 。 一 个 是 readyState， 它 的 值 是 从 0 
到 4 的 一 个 数值 ， 分 别 表示 请 求 已 经 初始 化 完毕 (1 )、 请 求 已 经 发 送 (2) 已 经 接收 到 部 分 啊 应 
(3) 和 请 求 响应 完成 (4 )。 显 然 ， 除 非 readystate 属 性 的 值 为 4， 否 则 往 下 处 理 没有 意义 。 男 一 
个 属性 是 status， 保 存 看 HTTP 状 态 码 。 对 这 个 属性 ， 我 们 需要 等 待 它 的 值 变 成 200， 表 示 一 切 顺 
利 。 假 设 我 们 请 求 的 是 一 个 网 页 ， 那么 HTTP 状 态 人 码 可 能 是 401 ( 表示 不 允许 访问 )、404 ( 没有 找 
到 )、302 (已 经 移动 ) 2503 CHA dE RTI), TE. CHE Y ESETERJHTTPAAGS RS, IA: 
www.addedbytes.com/for-beginners/http-status-codes. ) 

我 们 的 例子 是 这 样 检 测 这 两 个 属性 的 : 


function handleServerResponse() { 
if ((req.readyState == 4) 8& (req.status == 200)) 1 


如 果 两 个 条 件 都 满足 ， 就 可 以 从 XMLHttpRequest 的 response 属 性 中 取得 结果 了 。 当 然 ， 我 
们 知道 ， 这 个 结果 是 两 个 数值 相 加 的 和 。 人 然后， 代码 会 把 这 个 结果 显示 在 页 面 上 (参见 图 11-2 ): 


var result = req.responseText; 
document.getElementById("result").innerHTML = "The answer is: " + 
result + ".'; 
































D -— 图 11-2: Web 服务器 返回 响应 触发 了 JavaScript 
(om) C) | http://localhost/AskTheServer.html "ES die 函数 ， 函 数 把 结果 显示 在 网 页 上 


e Ask The Server | | 














Enter two numbers: 34 46 


To ask the server to add them, without refreshing the page, click this 


button: | Ask the Server 


( The answer is 80. 

















XMLHttpRequest 甚 实 并 不 限制 你 请 求 的 数据 类 型 ， 其 名 字 中 带 XML 是 因 一 开始 设计 它 的 时 候 
是 要 处 理 XML 数 据 ， 因 为 XML 是 组 织 结构 化 数据 的 一 种 方便 、 有 语义 的 格式 。 可 是 ， 
XMLHttpRequest 也 可 以 请 求 简单 的 文本 (就 像 我 们 这 个 例子 中 这 样 )、JSON 数 据 ( 参见 9.2.4 市 )、 
HTML (下 一 个 例子 会 涉及 ) 和 XML 等 。 事 实 上， 目前 用 XMLHttpRequest 请 求 非 XML 数 据 的 情况 
反而 更 多 见 ， 因 此 提醒 大 家 不 要 被 它 的 名 字 所 迷惑 。 
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提示 “在 调用 服务 器 端 代码 之 前 ， 必 须 先 把 包含 PHP 脚 本 的 网 页 放 到 一 个 测试 服务 器 上 。 为 了 
简单 起 见 ， 欢 迎 读者 到 本 书 网 站 上 试验 : www.prosetech.conyhtml5。 


11.1.3 ”取得 新 内 容 


XMLHttpRequest 对 象 的 男 一 种 用 法 是 取得 新 的 HTML 内 容 ， 然 后 插入 到 当前 页 面 中 。 比 如 ， 
新 闻 报 道中 可 能 包含 多 张 图 片 , 但 每 次 只 显示 其 中 一 张 。 按 一 下 按钮 ，JavaScript 就 会 取得 下 一 张 
图 片 ， 然 后 插 和 人 到 页 面 中 。 再 比如 ， 页 面 中 有 一 个 “五 强 ” 或 “十 强 ” 的 约 灯 片 ， 每 次 单 击 链接 
都 会 显示 一 张 。 图 11-3 展 示 了 一 个 与 文 草 相配 的 约 灯 户 ， 每 张 图 片 都 配 有 相应 的 文字 说 明 。 

图 11-3 所 示 的 用 例 在 很 多 情况 下 都 适用 。 在 恰当 设计 的 情况 下 ， 这 种 方法 非常 适合 展示 大 量 
内 容 ， 既 能 保证 可 读 性 ， 又 不 至 于 让 人 觉得 内 容 过 多 。( 如 果 内 容 本 里 不 多 ， 这 样 做 只 会 徒 增 复 
杂 性 ， 迫 使 用 户 发 送 多 个 请 求 才能 得 到 完整 内 容 。) 

取得 部 分 内 容 最 好 是 使 用 XMLHttpRequest 对 象 。 因 为 使 用 XMLHttpRequest 取 得 部 分 内 容 后 再 
更 新 页 面 ， 不 会 引起 整个 页 面 的 刷新 。 就 为 了 更 新 局 部 内 容 而 刷新 整个 页 面 可 不 好 ,那样 就 会 把 
其 他 没有 更 新 的 内 容 再 重新 下 载 一 过， 导致 页 面 闪烁， 而 且 有 时 候 还 会 把 页 面 重新 定位 到 项 部 。 
这 些 说 起 来 似乎 是 小 事 ， 没 那么 严重 ,但 正 是 这 些 细 市 决定 了 人 们 对 你 网 站 的 印象 是 流畅 快捷 ， 
还 是 老 气 横 秋 、 不 可 救 药 。 

要 做 出 图 11-3 所 示 的 例子 ， 首 先 要 给 动态 内 容留 出 空间 来 。 下 面 这 个 <div> 元 素 彰 景 是 金黄 
色 的 ， 它 下 面 是 两 个 链接 : 

«div id-"slide"»Click Next to start the show.«/div» 


«a onclick="return previousSlide()" href-"s"»&lt; Previous«/a»8nbsp; 
«a onclick="return nextSlide()" href="#">Next 8gt;«/a» 


这 两 个 链接 分 别 调用 previousSlide() 和 nextSlide() 函 数 ， 表 示 向 前 或 向 后 导航 。 这 两 个 也 
数 的 用 途 是 增加 计数 带 ， 计 数 融 的 值 从 0 开始 ， 最 大 为 S， 然 后 再 递减 回 1。 其 中 ，nextSlide() 郴 
数 的 代码 如 下 : 


var slideNumber = O0; 















































function nextSlide() { 
// 向 前 移动 幻灯 片 索引 
if (slideNumber == 5) { 
slideNumber = 1; 
} else ( 
slideNumber += 1; 


j 


// 调 用 另 一 个 水 数 显示 当前 幻灯 片 
goToNewSlide(); 





// 取 消 链接 的 默认 动作 
//| (〈 即 不 会 打开 新 页 面 ) 
return false; 
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Firefox 7 





| [J China Sites 





€» http://localhost/China/ChinaSites.html 





adt: 


The Exotic Side of China 


China's chief tourist attractions are well known. Less familiar are the sites 
discussed here, which range from quirky to beautiful to downright discomfiting. If 
you're looking to explore something a little less usual, come follow us off the 
beaten track. 


Click Next to start the show. 


< Previous E > 

(Typical disclaimers apply. Travel writer's actual knowledge of the reviewed country may be low or 
outdated. Culture stereotypes may be present, and if so are for entertainment purposes only. Sites are not 
guaranteed to actually exist in the r nt time. Your enjoyment may vary 


Feedback tolerated, reluctantly at WhatWeDidWrong&|Jtravelt 


Firefox Y 





| 7) China Sites 

















€, > | http://localhost/China/ChinaSites.html 


The Exotic Side of China 


China's chief tourist attractions are well known. Less familiar are the sites 
discussed here, which range from quirky to beautiful to downright discomfiting. If 
you're looking to explore something a little less usual, come follow us off the 
beaten track. 


Traditional Village 


Take a beautiful trip back in time. Just don't complain about the 
sanitation facilities. 
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图 11-3， 这 个 页 面 把 内 容 分 成 多 个 幻灯 
片 。 单 击 Previous 或 Next 链 接 可 以 加 载 新 
幻灯 片 , 包含 新 图 片 和 相应 的 说 明文 本 。 
实现 这 个 功能 的 时 候 要 用 到 
XMLHttpRequest 对 象 ， 它 会 在 必要 时 请 
求 新 内 容 








IfijipreviousSlide() KTR- zc AE ASA : 


function previousSlide() { 
if (slideNumber -- 1) ( 
slideNumber = 5; 
} else 1 
slideNumber -- 1; 


j 


goToNewSlide(); 
return false; 


} 

这 两 个 函数 都 依赖 于 另 一 个 函数 goToNewSlide() 去 完成 真正 的 工作 。 所 请 真 正 的 工作 就 是 它 
会 使 用 XMLHttpRequest 与 Web 服 务 需 通信 ， 然 后 取得 新 数据 。 

一 个 现实 的 问题 : ChinaSites.html 页 面 从 哪里 取得 数据 ? 复杂 一 点 的 话 ， 它 可 以 从 某 个 Web 
服务 或 PHP 脚 本 取得 数据 。 新 内 容 可 以 动态 生成 ， 或 者 从 数据 库 中 该 出 来 。 但 我 们 这 个 例子 会 采 
取 技 术 含量 低 一 点 的 方法 ,但 在 任何 Web 服 务 融 上 都 行 得 通 一 一 读 取 特 定 的 文件 。 比 如 ， 与 第 一 
sk ZJ XT Fox m m x fri ChinaSites] slide.html ,与 第 二 个 张 幻 灯 片 对 应 的 文件 是 
ChinaSites2_slide.html, 以 此 类 推 ,每 个 文件 中 里 包含 一 小 段 HTML 标 记 ( 而 不 是 一 个 完整 的 HTML 
Ji). 例如，ChinaSites5_ slide.html 中 包含 如 下 HTML 标记 : 


«figure» 
«h2»Wishing Tree«/h2» 
«figcaption»Make a wish and toss a red ribbon up into the branches 
of this tree. If it sticks, good fortune may await.«/figcaption» 
«img STC= wishing tree.jpg > 

</figure> 


既然 知道 了 数据 保存 在 哪里 ， 通 过 XMLHttpRequest 取 得 正确 的 文件 就 是 小 菜 一 碟 了 。 为 生成 
正确 的 文件 名 ， 只 要 在 一 行 简 单 的 代码 中 航 入 计数 带 当 前 的 值 即 可 。 下 面 就 是 goToNewS1Lide() 盯 
数 的 代码 : 


var req = new XMLHttpRequest(); 




















function goToNewSlide() { 
if (req != null) { 
// 准 备 请 求 包含 幻灯 片 数据 的 文件 
req.open("GET", "ChinaSites" + slideNumber + " slide" + ".html", true); 


/ [ik X. IT A3 23 p h CAE 069 d C 
req.onreadystatechange = newSlideReceived; 
// 发 送 请 求 

reg.send(); 


j 
} 


最 后 一 步 就 是 把 取得 的 数据 复制 到 表示 当前 约 灯 万 的 <div> 元 素 中 : 
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function newSlideReceived() { 
if ((req.readyState -- 4) && (req.status == 200)) { 
document.getElementById("slide").innerHTML - req.responseText; 
} 
} 


提示 为 了 让 幻灯 片 更 生动 ， 可 以 创建 过 渡 效 果 。 比 如 ， 新 图 片 可 以 淡 入 到 视图 ， 与 此 同时 淡 
出 旧 图 片 。 为 此 ， 只 要 设置 opacity 属 性 并 编写 一 段 JavaScript 计 时 器 代码 就 行 了 。( 这 里 
是 经 典 的 实现 方案 : http:/clagnut.com/sandbox/imagefades.php， 这 里 的 CSS 方 全 使 用 了 新 
的 CSS3 过 渡 功 能 ， 但 该 功能 尚未 得 到 所 有 浏览 器 支持 : httpi//css3.bradshawenterprises. 
com/cfimg2/, ) 实际 上 ， 这 也 是 使 用 XMLHttpRequest 的 动态 页 面 的 一 个 好 处 一 一 可 以 控制 
新 内 容 呈 现 的 方式 。 








这 个 例子 到 现在 还 没有 完 。12.3.1 节 在 讨论 HTMLS 的 历史 管理 功能 时 ， 还 会 讲 到 如 何 让 这 个 
例子 中 当前 显示 的 幻灯 片 与 浏览 器 地 址 栏 中 的 URL 匹 配 。 不 过 ,就 本 章 内 容 来 说 , 我 们 接 下 来 应 
该 介绍 其 他 与 Web 服 务 器 通信 的 方式 了 。 


11.2 服务 器 发 送 事 件 


使 用 XMLHttpRequest 可 以 加 Web 服 务 天 发送 请 求 ， 并 且 能 很 快 得 到 啊 应 。 这 种 通信 方式 是 一 
对 一 的 ， 即 Web 服 务 需 啊 应 之 后 ， 通 信和 就 结束 了 。 换 名 话说 ，Web 服 务 需 不 可 能 等 几 分 钟 ， 等 有 
了 更 新 之 后 再 发 送 一 次 啊 应 。 

不 过 , 有 一 些 网 页 可 以 与 Web 服 务 太 保持 长 期 的 联系 。 比 如 ,显示 股票 报价 的 Google Finance 
( http:/www.google.com/finance )。 在 加 面 上 打开 这 个 页 面 不 用 管 它 ， 股 票 价格 也 会 定期 更 新 。 再 
比如 ， 英 国 广播 公司 (BBS) 的 深 动 新 闻 页 面 http:/www.bbc.co.uk/mews/。 采 在 这 个 页 面 上 一 天 ， 
你 也 会 发 现 新 闻 标 题 日 动 更 新 。 当 人 然 ， 在 一 些 Web 邮 件 程 序 里 ( 比如 Hotmail,，www.hotmail.com ) 
也 能 发 现 收 件 箱 会 不 断 增 加 新 邮件 。 

以 上 例子 中 的 网 页 使 用 了 一 种 技术 ， 叫 做 轮 询 。 顾 名 思 义 ， 轮 询 就 是 每 隔 一 定时 间 〈 比如 几 
分 钟 ) 就 回 Web 服 务 需 请 求 新 数据 。 为 了 实现 这 个 操作 ， 可 以 使 用 JavaScript 的 setInterval() 或 
setTimeout()PAZk (参见 7.4.1 节 )， 每 过 设 定 的 时 间 就 触发 一 次 代码 。 

轮 询 是 一 个 合理 的 方案 ,但 有 时 候 效率 不 高 。 因 为 轮 询 意味 着 要 辣 服 务 需 发 送 请 求 ， 要 建立 
新 连接 ， 而 这 样 做 只 是 想 知道 是 否 有 新 数据 。 如 有 果 成 千 上 万 的 用 户 都 这 样 轮 询 ,无 疑 会 给 服务 硕 
造成 无 请 的 压力 。 

还 有 一 种 方案 , 叫做 服务 器 发 送 事件 ( server-sent event ), 可 以 让 网 页 与 Web 服 务 器 保持 连接 。 
服务 套 任 何 时 候 都 可 以 发 送 消 和 县， 而 不 必 频 索 断 开 连 接 , 然后 再 重新 连接 并 重新 运行 服务 右 并 肢 
本 。( 除非 你 而 望 如 此 ， 因 为 服务 需 发 送 事件 也 文 持 轮 询 。) 最 关键 的 是 , 使 用 服务 需 发 送 事件 很 
简单 ， 大 多 数 Web 主 机 都 支持 ， 而 且 极 其 稳定 可 徘 。 但 毕 苋 它 是 一 个 相对 新 的 技术 ， 在 本 书写 作 
时 Internet Explorer 不 文 持 它 ， 如 表 11-1 所 示 。 
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311-1 浏览 器 对 服务 器 发 送 事件 的 支持 情况 
IE Firefox Chrome Safari Opera Safari iOS Android 
最 低 版 本 一 6 5 5 11 4 


* 目 前 ， 该 版 本 只 是 一 个 beta 版 。 





注意 ”如 果 你 想 找 一 些 能 够 模拟 服务 器 发 送 事件 的 腻子 脚本 , 可 以 参考 这 里 :http://tinyurl.com/ polyfills。 





接 下 来 几 市 ， 我 们 将 通过 一 个 简单 的 例子 演示 服务 右 发 送 事 件 。 


11.2.1 消息 格式 


dim i id 同 ， 服 务 需 发 送 事 件 这 个 标准 不 允许 随意 发 送 数 据 ， 而 是 必须 遵循 
plos brie, 每 条 消息 必须 以 “data:” 开 头 ， 然 后 是 实际 的 消息 内 容 ， 再 加 上 换行 
符 (PHP 等 很 多 程 语言 中 用 “\n\n” 表 示 换 行 符 )。 
eh 
data: The web server has sent you this message.\n\n 
也 可 以 把 一 条 消息 分 成 多 行 ， 每 行 都 要 跟 一 个 行 结束 符 ， 用“\n” 表 示 。 这 样 就 可 以 发 送 较 
复杂 的 内 容 了 : 


data: The web server has sent you this message.\n 
data: Hope you enjoy it.\n\n 


不 过 ， 一 条 消息 分 成 多 行 ， 每 行 开头 仍 要 有 "data", 而 整个 消息 结束 天 村 要 跟 Ann” 
利用 这 个 格式 ， 甚 至 可 以 发 送 JSON 数 据 (参见 9.2.4 节 )， 这 样 网 页 只 需 一 步 即 可 把 文本 转换 
为 JavaScript 对 象 : 


data: (An 

data: "messageType": "statusUpdate" Vn 
data: "messageData": "Work in Progress"\n 
data: }\n\n 


UR FIBESGREZ AR, Weblltórdssxtu] LA AESUE—BJID(E EH “id” A) 和 一 个 连接 超 
时 选项 (使 用 “retry:” 前 级 ): 


id: 495\n 
retry: 15000\n 
data: The web server has sent you this message.\n\n 


你 的 网 页 一 般 只 关注 消息 本 身 , 不 关心 DD 和 连接 超时 信息 ,用 和 超时 信息 是 浏览 器 要 使 用 的 。 
比如 ， 浏 览 套 在 读 到 以 上 信息 后 就 会 知道 ， 如 有 果 连 接 已 经 断 开 ， 那 么 应 该 在 1$ 0002€ fb (15%) 
后 再 重新 建立 连接 。 重 新 建立 连接 时 ， 应 该 把 ID 编号 495 一 起 发 给 服务 器 ， 以 便 确 认 。 









































器 与 服务 器 失去 联系 的 原因 有 很 多 ， 上 比如 网 络 中 断 或 者 代理 服务 器 等 待 数据 超时 。 
浏览 器 会 在 可 能 的 情况 下 自动 重新 打开 连接 ， 默 认 等 待 时 间 为 3 秒 钟 。 
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1 1.2.2 通过 月 及 务 AA 器 脚本 发 送 Ji a 


ABB. ABARA, 2 03 HC m ARREA P s E, 我 们 还 是 以 几乎 所 有 
Web 主 机 都 文 持 的 PHP 来 写 一 个 直观 的 例子 。 图 11-4 展 示 了 一 个 从 服务 需 取 得 消息 的 页 面 ， 而 消 
县 的 内 容 只 是 服务 从 上 的 当前 时 间 。 














— — 图 11-4: 页 面 在 监听 的 情况 下 , 会 连续 不 断 地 收 到 
€ CQ | Q localhost/ServerEvents.html | 服务 器 发 送 的 ; 消息 , 大 约 每 两 秒 钟 一 条 。 每 条 消 
| 息 都 会 在 上 面 的 消息 框 中 依次 列 出 ， 消 息 框 下 方 

EL TREE UNE i 的 时 间 表 示 接 收 最 后 一 条 消息 的 时 间 


Started listening for messages. 

New web server time received: 10:21:08 
New web server time received: 10:21:10 
New web server time received: 10:21:12 
New web server time received: 10:21:14 





New web server time received: 10:21:16 
No longer listening for messages. 
Started listening for messages. 

New web server time received: 11:45:08 
New web server time received: 11:45:10 
New web server time received: 11:45:12 
New web server time received: 11:45:14 
New web server time received: 11:45:16 
New weh server time received: 11:45:18 





Stop Listening 














注意 ee riii 因此 保存 该 时 间 信 息 的 变量 也 要 持续 更 新 。 为 了 注 
一 点 ， 我 们 就 可 以 创建 一 个 简单 的 服务 器 端 事件 。 不 过 ， 在 真正 的 开发 中 ， 服 务 器 
nido 更 有 价值 的 消息 ， 比 如 为 生成 滚动 新 闻 而 发 送 最 新 的 新 闻 标 题 。 


x 


» 


xx PA BRI AS iem d S EL Ze fn] ERG HSE PAESE IRI XS TR], DA PIeSESERS TAGS: 


«?php 
header("Content-Type: text/event-stream"); 
header('Cache-Control: no-cache'); 


/ [TE 35 I i] Bp e 48 f 
do 1 
// 取 得 当前 时 间 
$currentTime = date("h:i:s", time()); 


// 把 时 间 放 到 消息 中 发 送 

echo "data: " . $currentTime . PHP EOL; 
echo PAP EOL; 

TWSA; 
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// 等 两 秒 钟 再 创建 新 消息 
sleep(2); 
} while(true); 
?> 


脚本 开始 先 设 置 了 两 个 重要 的 头 部 信息 。 首 先 ， 设 置 了 MIME 类 型 为 text/event-stream， 这 
征服 务 胡 闯 事 件 标 准 规定 的 : 

header("Content-Type: text/event-stream"); 

然后 ， 告 诉 Web 服 务 硕 〈 及 代理 服务 需 ) 关闭 Web 绥 存 。 否 则 ， 含有 时 间 的 消息 可 能 不 会 按 
先后 次 序 到 达 : 

header('Cache-Control: no-cache'); 

剩 下 的 代码 构成 了 一 个 无 限 循环 〈 至少 在 客户 端 存 在 的 情况 下 会 一 下 循环 下 去 )。 每 次 循环 
都 会 调用 内 置 的 time() 消 数 ， 取 得 当前 时 间 (格式 为 hh:mm:ss )， 并 将 其 保存 在 一 个 变量 中 : 

$currentTime = date("h:i:s", time()); 

接 下 来 , 循环 利用 这 个 变量 按照 正确 的 格式 来 构建 一 条 消息 , 以 便 使 用 PHP 的 echo 命 令 发 送 。 
这 个 例子 中 的 销 息 只 有 一 行 ,以 “data; "开头 ,然后 是 时 间 。 消 息 字 符 串 的 最 后 是 一 个 稼 量 PHP_EOL 
( 在 PHP 中 表示 end ofline， 即 行 结束 符 )， 也 就 是 我 们 前 面 讨论 的 “\n” 了 字符 : 


echo "data: " . $currentTime . PHP EOL; 
echo PHP EOL; 


























注意 ”或许 有 读者 觉得 用 点 操作 符 OO.) 来 连接 字符 串 很 有 意思 。 这 里 跟 JavaScript 中 使 用 加 号 
(+) 操作 符 连 接 字 符 串 是 一 样 的 ; 当然 ， 使 用 加 号 连接 字符 串 时 ， 必 须 至 少 有 一 个 操作 
数 是 字符 串 ， 如 果 每 个 操作 数 都 是 数值 ， 那 就 会 执行 加 法 计算 了 。 





调用 flush() 函 数 的 用 意 是 立即 发 送 数 据 , 而 不 是 和 完 绥 冲 起 来 ,等 到 PHP 代 码 执行 完毕 再 发 送 。 
最 后 ，sleep() 哨 数 会 让 程序 暂停 两 秒 钟 ， 然 后 再 继续 下 一 次 循环 。 








提示 ”如果 接收 两 条 消息 会 等 待 较 长 的 时 候 ， 可 能 是 连接 被 菜 个 代理 服务 器 ( 位 于 Web 服 务 器 
与 客户 机 之 间 ， 用 于 分 散 流量 的 服务 器 ) 给 切断 了 。 为 了 避免 这 种 情况 发 生 ， 可 以 每 隔 
15 秒 左右 ， 发 送 一 条 只 包含 冒号 〈: ) 而 没有 文本 内 容 的 注释 消息 。 


11.2.3 ”在 网 页 中 人 处理 消息 
监听 服务 带 发 送 消息 的 网 页 更 简单 。 以 下 就 是 网 页 <body> 部 分 的 所 有 标记 ， 分 为 三 个 <div> 
区 块 : 一 个 用 于 滚动 显示 谢 上 县、 一 个 用 于 显示 时 间 ， 态 一 个 用 于 显示 按钮 : 


«div id-"messagelog"»«/div» 
«div id-"timeDisplay"»«/div» 
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«div id-"controls"» 
«button onclick-"startlistening()" »Start Listening«/button»«br» 
«button onclick-"stoplistening() »Stop Listening«/button» 
</div> 


WEIR, JavaScript tB 2:1X SJIDZJmessageLogflltimeDisplayf'J«div»7625, ENUE 
EERE, ES BUT] KAEH : 


var messageLog; 
var timeDisplay; 








window.onload = function() { 
messageLog = document.getElementById("messageLog"); 
timeDisplay = document.getElementById("timeDisplay"); 


h 
监听 事件 的 过 程 在 用 户 单 击 Start Listening 4H BJE JT 46s WERT, J avaScript 会 创建 一 个 新 
EventSource 对 象 ， 传 入 服务 器 端 发 送 消息 的 脚本 URL。( 在 这 个 例子 中 ， 脚 本 名 为 
TimeEvents.php. ) 然后 , KAREK ZS ES onMessagezE EF, 这 个 事件 会 在 页 面 接收 到 消息 时 触发 : 


Var source; 








function startlistening() { 
source - new EventSource("TimeEvents.php"); 
source.onmessage = receiveMessage; 
messagelog.innerHTML += "<br>" + "Started listening for messages."; 


提示 “为 了 检测 浏览 器 是 否 支 持 服 务 器 端 事件 ， 可 以 测试 是 否 存在 window.EventSource 属 性 。 如 
果 不 存 在 ， 就 要 使 用 后 备 方案 。 比 如 ， 可 以 使 用 XMLHttpRequest 对 象 定时 向 Web 服 务 器 请 
RAHE 





在 触发 了 receiveMessage 图 数 时 ， 可 以 从 事件 对 象 的 data 属 性 中 取得 消息 。 对 我 们 这 个 例子 
而 言 ， 会 把 新 消息 显示 在 原来 的 消息 框 中 ， 然 后 更 新 时 间 显 示 : 


function receiveMessage(e) { 
messageLog. innerHTML += "<br>" + "New web server time received: " + e.data; 
timeDisplay.innerHTML = e.data; 


j 

注意 ， 网 页 接收 到 的 消息 不 会 包含 前 级 “data:” 和 结束 的 “\n\n” 符 号 ， 只 有 其 中 的 消息 内 
容 ( 也 就 是 时 间 值 本 刁 )。 

最 后 ， 调 用 EventSource 对 象 的 close() 方 法 ， 可 以 让 页 面 停止 监听 服务 融 事件 ， 相 应 的 代码 
如 下 : 


function stopListening() { 
source.close(); 
messagelog.innerHTML += "<br>" + "No longer listening for messages."; 
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11.2.4 轮 询 服务 器 端 事件 


前 面 的 例子 以 最 简单 的 方式 使 用 了 服务 需 端 事件 : 页 面 发 送 请 求 ， 连接 保持 打开 ， 服 务 需 定 
时 发 送信 息 。 在 当前 连接 有 问题 或 者 出 于 其 他 目的 (比如 手机 电池 快 没 电 了 ) 临 时 终止 了 通信 时 ， 
浏览 大 可 能 需要 重新 连接 〈 重 新 连接 也 是 目 动 的 )。 

如 果 服 务 需 脚本 结束 了 , 而 且 服 务 融 关闭 了 连接 怎么 办 ? 这 个 就 有 意思 了 , 因为 即便 服务 套 
有 意 关 闭 连 接 , 网 页 仍然 会 日 动 重 新 打开 连接 ( 软 认 等 待 3 秒 钟 ), 再 次 请 求 脚 本 , 然后 从 头 开 始 。 

这 种 机 制 是 可 以 利用 的 。 比 如 ,假设 你 写 了 一 个 比较 短 的 服务 天 脚本 ， 只 发 送 一 条 消息 。 而 
此 时 网 页 就 像 在 使 用 轮 询 (参见 前 几 页 )， 周 期 性 地 重新 建立 连接 。 唯 一 的 差别 就 是 Web 服 务 需 
会 告诉 浏览 厚 再 等 待 多 长 时 间 才 能 检查 新 数据 。 在 真正 使 用 轮 询 的 网 页 中 ， 等 待 时 间 是 在 
JavaScript 代 码 中 确定 的 。 

下 面 这 段 脚 本 混合 了 两 种 手段 ， 它 保持 连接 (并 周期 性 地 发 送 消息 ) 1 分 钟 ， 并 建议 浏览 攻 
等 答 2 分 钟 再 重新 连接 ， 然 后 关闭 连接 : 

<?php 


header("Content-Type: text/event-stream"); 
header('Cache-Control: no-cache'); 


























// 告 诉 浏 览 器 在 连接 关闭 后 
// 等 待 2 分 钟 再 重新 连接 
echo "retry: 120000" . PHP EOL; 


// 保 存 开 始 时 间 
$startTime = time(); 


do 1 
// 发 送 消息 
$currentTime = date("h:i:s", time()); 
echo "data: " . $currentTime . PHP EOL; 
echo PHP EOL; 
flush(); 


// 如 果 过 了 1 分 钟 ， 结 束 脚 本 

if ((time() - $startTime) > 60) { 
die(); 

} 


// 等 5 秒 钟 ， 发 送 新 消息 
sleep(5); 
} while(true); 
?> 


这 样 ， 等 再 运行 脚本 时 ， 就 可 以 做 到 用 1 分 钟 时 间 来 更 新 ， 然 后 暂停 服务 2 分 钟 ( 参见 图 
11-5 )。 对 于 较 复 杂 的 例子 而 言 ， 或 许 需 要 Web 服 务 需 回 浏 览 锅 发 送 一 条 特殊 的 消息 , 告诉 它 不 
必 等 竺 数据 更 新 ( 比如 股市 今天 已 经 停止 交易 了 )。 此 时 ,网 页 就 可 以 调用 EventSource 的 close() 
方法 。 
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| Led — 图 11-5， 这 个 页 面 使 用 了 消息 流 ( 在 1 分 钟 时 
| ] Server-Sant Events Wn N S SS ssj? N `S 
间 内 发 送 一 批 消息 ) ， 然 后 使 用 轮 询 ( 等 待 2 
分 钟 )。 这 种 方案 有 助 于 减少 Web 服 务 器 的 流 
ELLET 量 ， 但 要 考虑 数据 更 新 的 频率 及 保持 数据 最 
区 e 新 的 必要 程度 
New web server time received: 01:49:13 
New web server time received: 01:49:18 
New web server time received: 01:49:23 
New web server time received: 01:49:28 


New web server time received: 01:49:33 
New web server time received: 01:49:38 





€ C | Q localhost/ServerEven:s.html 


New web server time received: 01:49:43 
New web server time received: 01:49:48 
New web server time received: 01:49:53 
New web server time received: 01:49:58 
New web server time received: 01:50:03 
New web server time received: 01:50:08 
New web server time received: 01:52:08 
New web server time received: 01:52:13 








Start Listening 


| Stop Listening | 











注意 ”对 于 复杂 的 服务 器 脚本 ,浏览 器 的 自动 重新 连接 行为 有 时 候 并 不 好 对 付 。 比 如 ，Web 服 
务 器 可 能 会 在 执行 某 个 任务 期 间 就 把 连接 断 开 。 这 种 情况 下 ，Web 服 务 器 代码 会 给 每 个 
客户 端 发 送 一 个 ID (如 11.2.2 节 所 述 )， 以 便 重 新 连接 时 再 把 这 个 ID 发 给 服务 器 。 可 是 ， 
服务 器 端 代 码 必 须 负 责 生 成 ID、 记 录 每 个 ID 的 操作 ( 比如 把 某 些 数据 保存 到 数据 库 里 )， 
以 及 在 停止 处 进行 恢复 等 。 所 有 这 些 都 需要 你 具有 丰富 的 编码 经 验 。 


11.3 Web Socket 


服务 融 发 送 事 件 非 党 适合 从 服务 大 连续 不 断 地 接收 消息 。 但 整个 通信 完全 是 单 回 的 , 无 法 知 
道 浏 览 硕 是 否 啊 应 ， 也 不 能 进行 更 复杂 的 对 话 。 

如 有 末 你 想 创 建 一 个 应 用 ， 浏 览 需 与 服务 硕 需 要 正式 对 话 ， 那 你 很 可 能 使 用 XMLHttpRequest 对 
象 ( 而 不 用 Flash )。 使 用 XMLHttpRequest 对 象 在 很 多 情况 下 没有 问题 ， 但 同样 也 有 很 多 情况 不 合 
适 。 首 先 ，XMLHttpRequest 不 适合 快速 地 来 回 发 送 多 条 消息 〈 比 如， 聊天 室 )。 其 次 , 没有 办 法 将 
一 次 调用 与 下 一 次 调用 联系 起 来 ,每 次 网 页 发 送 请 求 ， 服 务 需 都 要 确定 请 求 来 目 何 方 。 在 这 种 情 
况 下 ， 要 想 把 一 系列 请 求 关 联 起 来 ， 服 务 需 端 代 人 码 会 变 得 非常 复杂 。 

有 一 个 方案 能 解决 这 个 问题 ， 但 目前 还 没有 得 到 所 有 浏览 硕 文 持 。 这 个 方案 就 是 Web Socket 
标准 。 根据 这 个 标准 , 浏览 硕 能 够 保持 对 Web 服 务 套 打开 的 连接 , 从 而 与 服务 兰 长 时 间 交 换 数 据 。 



































292 | 第 11 章 与 Web 服务 器 通信 





Web Socket ELEF A A RIEK XA, [HH BUM SO ARUESE. MEHL EWA EARD mom 
的 时 候 , Firefox 4 和 Opera 11 都 曾 支 持 过 Web Socket, 但 后 来 由 于 安全 方面 的 考虑 又 取消 了 。Firefox 
6 计划 重新 文 持 它 ， 但 会 在 原来 协议 基础 上 稍 作 修 改 ， 而 且 Opera 未 来 的 版 本 也 可 能 会 再 文 持 它 。 
微软 没有 对 此 作出 承诺 ， 但 却 给 出 了 一 个 开放 性 的 试验 页 面 (参见 http:/Wtinyurl.com/3szzz72 ) '. 

由 于 一 切 还 在 变化 ， 所 以 很 难 断 定 Web Socket 标 准 最 终 的 情况 。 事 实 上 ， 本 市 都 没有 提供 一 
^ xS DUE. BS AS TO] Vti EJ AS FR] CAS SER] Web Socket 标 准 版 本 也 不 一 样 。 总 之 ， 就 是 没 
有 达到 较 好 的 鉴 浏 览 厚 碌 容 水 平 。 换 句 话说 ，Web 服 务 硕 实现 了 Web Socket 一 个 版 本 ， 而 浏览 用 
文 持 Web Socket 的 为 一 个 版 本 ， 两 者 之 间 就 无 法 通信 。 











注意 目前 ， 最 好 是 在 Chrome 中 测试 Web Socket 页 面 ， 因 为 它 对 Web Socket 的 支持 一 直 是 最 好 
的 。 除 了 Chrome， 也 可 以 在 Firefox 6 beta 版 及 以 上 版 本 中 测试 。( 尽管 通过 隐藏 设置 可 以 
把 浏览 器 对 Socket 的 支持 切换 到 旧版 本 ,但 却 非常 麻烦 , 而且 只 能 使 用 过 时 的 版 本 ; 所 以 ， 
真 的 没有 必要 这 么 做 。) 


11.3.1 访问 Web Socket 


看 到 这 里 , 想必 谈 者 知道 对 那些 还 没有 制定 完成 ， 或 者 还 没有 被 完全 实现 的 新 功能 ， 是 不 用 
过 分 担心 的 。 真 正 的 问题 在 于 ， 现 在 需要 花 多 少时 间 去 学 习 Web Socket， 或 者 说 ， 它 到 底 是 不 是 
未 来 Web 编 程 中 的 一 个 有 价值 的 功能 ， 以 及 未 来 一 到 两 年 内 ， 你 会 不 会 在 目 己 的 应 用 中 使 用 Web 
Socket? 

要 回答 这 些 问题 ， 必 须 理解 两 点 。 第 一 ，Web Socket 是 一 种 专用 手段 , 非常 适合 开发 聊天 室 、 
大 型 多 人 游戏 ， 或 者 端 到 疹 的 协作 工具 。 利 用 它 能 开发 出 很 多 新 应 用 ， 但 惑 介 不 太 适 合 今天 
JavaScript 驱 动 的 Web 应 用 ( 比如 电子 商务 站 点 )。 

第 二 ，Web Socket 方 和 案 做 起 来 可 能 会 无 比 复杂 。 网 页 中 的 JavaScript 很 简单 ， 可 服务 融 端 代码 
不 好 写 ， 为 此 必须 妆 练 营 握 编程 技能 ， 而 且 要 对 多 线程 和 网 络 模型 有 深刻 理解 。 

为 了 使 用 Web Socket， 需 要 在 Web 服 务 咒 上 运行 一 个 程序 (也 叫 Web Socket 服 务 器 )。 这 个 程 
序 负 责 协 调 各 方 通信 ， 而 且 启 动 后 就 会 不 间断 地 运行 下 去 。 


























注意 很 多 Web 主 机 不 允许 长 时 间 运 行程 序 ， 除 非 你 购买 的 是 专用 服务 器 ( 只 分 配给 你 的 网 站 
使 用 ， 不 与 他 人 共享 )， 如 果 你 使 用 的 是 共享 主机 ， 那 很 可 能 无 法 创建 使 用 Web Socket 
的 网 页 。 就 算 你 能 启动 Web Socket 服 务 器 ， 让 它 不 间断 运行 ，Web 主 机 商会 检测 它 并 把 它 
XH. 


EI: JH ONU SX] Web Socket 的 最 新 支持 情况 ， 请 参考 http://caniuse.com/#feat=websockets。( 译 者 注 ) 
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为 了 让 读者 了 解 Web Socket 服 务 融 是 干什么 的 ， 下 面 列 出 了 与 它 有 关 的 一 些 任务 。 
O 设置 消息 “词汇 表 ”， 即 确定 哪些 消息 有 效 ， 这 些 消 息 有 什么 含义 。 
a ice BB ZR PUR o 
口 检测 癌 客 户 端 发 送 消息 是 否 出 错 ， 如 果 客 户 端 已 经 停止 啊 应 ， 则 终止 与 该 客户 通信 。 
O 处 理 内 存 数据 ,也 就 是 所 有 Web 客 户 端 都 可 以 访问 的 数据 。 可 能 涉及 很 多 微妙 的 问题 ， 比 
如 一 个 客户 问 要 加 入 ， 而 男 一 个 客户 病 要 退出 ， 这 两 个 客户 并 的 连接 都 保存 在 同一 个 内 
存 对 象 中 。 
多 数 开 发 人 员 都 没有 利用 Socket 创 建 过 服务 需 端 程序 ， 因 为 这 样 做 明显 代价 太 大 。 最 简单 的 
办 法 是 安装 别人 写 好 的 Web Socket 服 务 器 ， 然 后 再 设计 网 页 来 与 之 通信 。Web Socket 标 准 的 
JavaScript 部 分 使 用 起 来 很 容易 ,不 会 有 什么 问题 。 而 男 一 个 部 分 可 以 采取 别人 写 好 的 Socket 服 务 
佑 代码 ， 根 据 需 要 稍 加 改动 即 可 。 目 前 ， 有 很 多 现成 的 Web Socket 服 务 需 项 目 ， 其 中 不 乏 开 源 和 
仿 费 的 。 这 些 项 目 人 致 力 于 实现 各 种 功能 ， 也 文 持 很 多 种 服务 右 端 编程 语言 。11.3.3 市 将 详细 介绍 
一 些 项 目 。 

















11.3.2 ”简单 的 Web Socket 客 户 端 





从 网 页 的 角度 看 ，Web Socket 很 容易 理解 ， 也 很 容易 使 用 。 第 一 步 就 是 创建 WMebSsocket 对 象 ， 
传人 一 个 URL， 比 如 : 

var socket = new WebSocket("ws://localhost/socketServer.php"); 

这 个 URL 以 ws:/ 开 头 ， 是 一 个 表示 Web Socket 连 接 的 新 协议 。 不 过 ，UREL 仍 然 指向 服务 器 上 
的 一 个 Web 应 用 ( 即 这 里 的 socketServer.php 脚 本 )。Web Socket 标 准 还 文 持 以 wss:/ 开 头 的 URL， 
表示 安全 、 加 密 的 连接 ( 这 跟 请 求 网 页 时 使 用 https:// 而 不 是 http:// 一 样 )。 








注意 Web Socket 并 不 仅 限 于 连接 自己 的 Web 服 务 器 。 你 的 网 页 可 以 打开 一 个 到 其 他 Web 服 务 器 
的 Web Socket 连 接 ， 而 不 会 增加 任何 工作 量 。 


创建 Websocket 对 象 后 ,页面 就 会 尝试 连接 服务 右 。 下 一 步 ， 就 是 使 用 Mebsocket 对 象 的 4 个 事 
件 : onOpen, onError, 、onClose 和 onMessage。 其 中 ，on0pen 会 在 建立 连接 后 触发 ，onErTror 会 在 出 
现 问 题 时 触发 , onClose 会 在 连接 关闭 时 触发 , 而 onMessage 会 在 页 面 从 服务 需 接 收 到 消息 时 触发 。 
利用 这 些 事件 ， 就 可 以 实现 与 Web Socket 服 务 需 的 通信 : 


Socket.onopen = connectionOpen; 
socket.onmessage = messageReceived; 
socket.onerror = errorOccurred; 
socket.onopen = connectionClosed; 
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比如 ， 连 接 成 功 后 ， 需 要 回 服务 带 发 送 一 条 消息 。 发 送 消息 要 使 用 Mebsocket 的 send() 方 法 ， 
这 个 方法 接收 纯 文 本 内 容 作 为 参数 。 下 面 就 是 处 理 on0pen 事 件 并 发 送 消息 的 函数 : 


function connectionOpen() { 
socket.send("UserName:jerryCradivo23@gmail .com"); 


Í 

可 想 而 知 ， 服 务 絮 在 收 到 这 条 消息 后 ， 会 发 回 一 条 新 消息 。 

利用 onError 或 onClose 事 件 ， 可 以 辐 用 户 发 出 通知 。 不 过 ， 最 重要 的 事件 还 是 onMessage， 
当 Web 服 务 絮 发 来 新 数据 时 ， 都 会 触发 这 个 事件 。 同 样 ， 啊 应 这 个 事件 的 JavaScript 代 码 也 非常 好 
理解 ， 主 要 是 从 事件 对 象 的 data 属 性 中 取得 消息 内 容 : 


function messageReceived(e) { 
messagelog.innerHTML += "<br>" + "Message received: ”+ e.data; 


j 

如 果 网 页 认为 通信 可 以 结束 了 ， 可 以 调用 disconnect() 方 法 关闭 连接 : 

socket.disconnect(); 

经 过 以 上 简单 介绍 ， 我 们 知道 使 用 其 他 人 写 好 的 Web Socket 服 务 融 并 不 费事 ， 只 要 驹 道 发 送 
什么 消息 ， 以 及 服务 融会 发 回 什么 消息 即 可 。 











注意 ”建立 Web Socket 连 接 时 ,后 台 其 实 会 执行 很 多 处 理工 作 。 首 先 ,网 页 要 使 用 第 见 的 HTTP 
标准 与 服务 器 建立 联系 ， 然 后 再 把 连接 “升级 ”到 Web Socket 连 接 ， 以 便 浏 览 器 与 服 
务 器 能 够 双向 通信 。 此 时 ， 如 果 计 算 机 与 服务 器 之 间 有 代理 服务 器 ( 比如 在 公司 网 络 
中 )， 可 能 会 遇 到 问题 。 代 理 服务 器 可 能 会 拒绝 请 求 并 断 开 连接 。 对 于 这 种 问题 ， 可 以 
检测 失败 的 连接 (通过 WebSocket 对 象 的 onError 事 件 )， 然 后 使 用 http://tinyurl.com/ 
polyfills 中 的 Socket“ 腻 子 脚 本 ”来 作为 后 备 。 这 些 脚 本 会 使 用 轮 询 来 模拟 Web Socket 
连接 。 


11.3.3 ”使 用 现成 的 Web Socket 服 务 器 


你 想 上 自己 试 试 Web Socket? 没 问题 , 网 上 有 很 多 现在 的 Web Socket 服 务 顺 可 供 你 搭建 试验 
环境 。 比 如 ， 可 以 先 试 试 http:/www.websocket.org/echo.html， 这 个 页 面 提供 了 一 个 最 基本 的 Web 
Socket 服 务 需 : 你 癌 它 发 送 消 息 ,， 它 再 返回 同样 的 消息 (参见 图 11-6 )。 虽然 这 谈 不 上 有 意思 , 但 
却 能 让 我 们 玖 悉 Websocket 对 象 的 所 有 功能 。 事 实 上 ， 无 论 你 的 网 页 保存 在 哪里 〈 可 以 在 你 上 自己 
的 Web 服 务 硕 上 ， 也 可 以 在 你 的 本 地 计算 机 人 硬盘 上 )， 都 可 以 连接 到 这 个 Web Socket 服 务 硕 。 

假如 你 还 不 满足 ， 可 以 再 看 看 下 面 这 两 个 更 有 意思 的 例子 。 

口 简单 的 聊天 程序 。 这 是 一 个 任何 人 都 可 以 免费 使 用 的 聊天 工具 ， 在 上 面 发 送 的 任何 消息 ， 

都 能 立即 被 所 有 人 看 到 。 它 的 地 址 是 http://html5demos.com/web-socket。 
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口 多 人 绘图 板 。 这 个 页 面 使 用 了 Web POE TME Canvas。 其 他 人 在 画布 上 作画 时 ， 你 
的 画布 上 能 够 实时 显示 他 们 的 笔迹 〈 反 之 亦 然 ) 这 个 想法 虽然 和 测 单 ， 但 真正 看 在 眼 里 ， 
还 是 挺 让 人 震惊 的 。 试 一 试 : http://mrdoob.com/projects/multiuserpad/。 


rp 2 E]11-6: 8 E EDU n 
é > Ovenotetan eon ES 所 发 送 消息 的 Web Socket 
a WebSocket.org 务 器 。 虽 然 没 有 什么 惊人 的 
ee T EENE | 创意 ， 但 却 能 让 你 体验 到 与 
| 现成 的 Web Socket 服 务 器 对 
allo 话 有 多 么 简单 


bU 2 


TPR (Disconnect | RES ont SE: Roc ktw vh HT DS: be OCKC = Me RIA 
eee ck th HTML5 cke A E R, zi 
Send 


Clear log 





Web Socket 服 务 器 
想 要 自己 做 一 个 实际 的 例子 ? 那 必 须 得 有 一 个 能 与 网 页 通信 的 Web Socket 服务 器 。 虽然 
如 何 编写 Web Socket 服务 器 超出 了 本 书 范围 〈 一 个 服务 器 程序 至 少 得 写 几 十 行 代码 ) 但 网 上 
有 很 多 现成 的 测试 服务 器 可 以 拿 来 用 。 下 面 就 分 别 按 语言 列 出 几 个 来 ， 供 读者 参考 。 
口 PHP。 这 是 一 个 简单 的 项 目 ， 在 此 基础 上 可 以 用 PHP 来 编写 一 个 Web Socket 服务 器 。 
地 址 是 : http://code.google.com/p/phpwebsocket/。 
口 Ruby。 针 对 Ruby 的 Web Socket 服 务 器 有 不 少 ， 但 这 个 使 用 了 EventMachine 模型 ， 很 
受 欢 迎 。 地 址 是 : http://github.com/igrigorik/em-websocket。 
口 Python。 这 是 一 个 Apache 扩展 ,使 用 Python 增加 了 Socket 服务器 。 地 址 是 : http://code. 
google.com/p/pywebsocket/。 
口 .NET。 简 单 ， 可 不 能 这 么 说 。 这 个 功能 全 面 的 项 目 包含 了 完整 的 Web Socket 服务 器 实 
现 ， 基 于 微软 .NET 平 人 台 和 C# 语 言 。 下 载 地 址 是 : http://superwebsocket.codeplex.com/。 
üQ Java, 与 刚才 .NET 那个 项 目 类 似 , 但 是 用 纯 Java 写 的 。 地 址 是 : http://jwebsocket.org/。 
口 node.js。 不 同 的 人 可 能 会 有 不 同 的 看 法 ，node.js( 能 运行 JavaScript 的 Web 服务 器 ) 既是 
一 个 前 途 无 量 的 新 生 事 物 ， sus io cb 测试 工具 。 无论 如 何 , 我 们 可 以 找到 一 个 
能 支持 它 的 Web Socket 服 务 器 ， 地 址 是 : http://github.conymiksago/node-websocket-server。 
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口 Kaazing。 与 这 里 列 出 的 其 他 项 目 不 同 ，Kaazing 并 不 提供 Web Socket 服 务 器 的 代码 ， 
而 是 提供 一 个 成 熟 的 Web Socket 服务 器 ， 经 过 许可 你 可 以 在 自己 的 网 站 中 使 用 它 。 对 
于 想 要 冒险 的 开发 人 员 , 这 个 现成 的 工具 可 能 不 够 刺激 。 但 对 于 没有 那么 高 要 求 的 网 站 
来 说 ,使 用 它 还 是 挺 不 错 的 ,特别 是 它 的 客户 端 库 还 内 置 了 对 回调 的 支持 (首先 尝试 使 
用 Web Socket 标准 ， 然 后 再 尝试 Flasn， 实 在 不 行 再 使 用 JavaScript 轮 询 )。 详 细 信 息 ， 
请 参考 这 里 : http://kaazing.com/products/html5-edition.html. 
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更 酷 的 JavaScript 技 术 








zl 到 目前 为 止 ， 我 们 已 经 介绍 了 HTMLS 的 所 有 关键 主题 。 而 你 也 已 经 使 用 它 写 出 了 更 有 
音义、 结构 更 清晰 的 标记 。 此 外 ， 本 书 还 讨论 了 HTML5 直 宦 的 图 形 功 能 ( 视频 和 动态 
绘图 )， 以 及 不 能 上 网 也 照样 可 以 使 用 的 基于 JavaScript 的 离线 应 用 。 

KÈ, 我 们 再 来 介绍 三 个 之 前 没有 提 到 的 JavaScript 新 功能 。 或 许 有 读者 了 解 过 了 , 这 些 功 能 

扩展 了 网 页 的 能 力 ， 只 要 编写 少量 JavaScript 代 码 即 可 。 下 面 就 请 这 三 个 新 功能 隆重 登场 。 

口 Geolocation 〈 地 理 定 位 ) 。 尽 管 经 常 以 HTMLS 的 名 义 提 到 ， 但 地 理 定 位 实际 上 是 一 个 单 
独 的 标准 ， 而 且 也 不 是 经 由 WHATWG (参见 1.1.3 节 ) 制定 的 。 然 而 ,与 其 他 很 多 HTML5 
功能 类 似 ， 地 理 定位 可 以 让 我 们 使 用 一 点 JavaScript 来 增强 页 面 ， 获 得 与 访客 位 置 相关 的 
信息 : 反映 访客 当前 位 置 的 地 理 坐 标 。 

O Web Workers。 随 着 Web 开 发 人 员 编 写 大 量 JavaScript 来 武装 网 页 ， 把 一 些 任务 放 在 后 人 台 
执行 变更 越 来 越 重要 。 这 些 任务 可 能 要 花 相 对 较 长 时 间 才 能 完成 ， 而 在 后 台 静 静 地 、 无 
干扰 地 运行 它们 已 经 成 为 大 势 所 趋 。 尽 管 也 可 以 使 用 计时 器 和 其 他 技术 ， 但 Web Workers 
规范 提供 的 执行 后 台 任 务 的 方 宁 更 简洁。 

OQ 会 话 历史 。Web 刚 刚 诞 生 的 时 候 ， 网 页 只 有 一 个 功能 : 显示 内 容 。 因 此 ， 人 们 把 时 间 大 都 
花 在 了 单 击 链接 ， 从 一 个 文档 跳 到 男 一 个 文档 上 上。 而今 天，JavaScript 能 让 网 页 不 必 刷 新 
即 可 加 载 另 一 个 页 面 的 内 容 。 如 此 一 来 ， 也 就 创造 出 了 更 加 流畅 的 体验 。 可 是 ， 这 样 也 
导致 了 一 些 问题 ， 比 如 怎么 让 浏览 亏 UREL 与 当前 内 容 同 步 。 为 了 解决 这 个 问题 ，Web 开 发 
人 员 想 出 了 各 种 办 法 ，HTML5 则 为 此 提供 了 新 的 会 话 历史 机 制 。 











注意 ”在 探索 这 三 个 功能 期 闻 ， 读 者 会 更 深入 地 理解 现在 所 谓 的 HTML5 都 包 仿 什么。 实际 上 ， 
很 多 东西 最 初 都 只 是 一 个 好 想法 ， 后 来 被 整合 到 这 个 雄心 勃勃 的 标准 中 ， 然 后 不 断 充 实 
完善 ， 直 至 包含 很 多 解决 不 同 问题 的 新 功能 ， 而 所 有 这 些 功能 无 非 都 源 于 那么 几 个 核心 
概念 ( 比如 语义 化 、JavaScript 和 CSS3 )。 


12.1 ”地理 定位 
Geolocation 可 以 让 我 们 确定 访客 在 地 球 的 什么 位 置 。 注 意 ， 这 可 不 是 说 判断 用 户 在 哪个 国家 
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或 者 哪个 城市 ， 而 是 说 确定 用 户 在 城市 的 哪 条 街道 上 ,其 至 是 用 户 正 拿 着 手机 在 哪里 上 网 ,给 出 
这 个 地 点 的 坐标 位 置 。 








表 12-1 列 出 了 文 持 地 理 定位 的 浏览 器 
IE Firefox Chrome Safari Opera Safari iOS Android 
最 低 版 本 9 3.5 5 5 10.6 3.2 2.1 





问题 最 突出 的 就 是 老 版 本 的 下 ， 比 如 IE7、IE8。 要 想 在 这 些 浏 览 硕 上 实现 地 理 定 位 功能 ， 可 
以 借助 Google Gears ( http://code.google.com/apis/gears )。Google Gears 是 在 HTML5 之 前 开发 出 来 
的 ， 具 有 与 之 类 似 的 很 多 功能 ， 也 包括 类 似 的 地 理 定位 。 虽 人 然 Google Gears 现 在 已 经 废弃 (所谓 
废弃 ， 指 的 是 Google 已 经 集 止 维护 它 ， 也 不 会 再 让 它 文 持 新 浏览 副 了 )， 但 对 于 老 版 本 的 浏览 3 
来 说 , 不 失 为 一 个 补救 工具 。 和 补救 方法 就 是 像 安 状 其 他 浏览 帮 插 件 一 样 ， 让 访客 在 利己 的 浏览 #8 
上 安装 Google Gears, 如 果 访 客 计 算 机 中 没有 安装 Google Gears, 还 可 以 考虑 使 用 Chrome Fram( 参 
11.6.47 )。 或 者 干脆 直接 让 访客 目 己 输入 当前 位 置 。 























注意 ”本 书 介绍 的 大 多 数 JavaScript 功 能 ， 最 初 都 源 自 HTML5S 规 范 ，W3C 接 手 后 ， 把 这 些 规范 逐 
一 地 分 离 了 出 来 。 但 Geolocation 不 是 这 样 的 ， 它 一 开始 就 不 属于 HITMLS， 而 是 与 HTML5 
几乎 同时 成 长 起 来 的 。 不 过 ， 很 多 人 到 现在 仍然 把 它 和 HTMLS 混 为 一 谈 ， 把 它们 当成 同 
一 类 Web 新 技术 。 


12.1.1 地理 定位 的 基本 原理 


只 要 不 是 神经 有 问题 ,人 们 都 会 提出 类 似 这 样 的 问题 : 几 行 代码 就 能 确定 我 现在 在 哪个 咖啡 
馆 里 面 ? 是 不 是 有 什么 隐藏 的 程序 在 跟踪 我 呀 ? 屋外 的 日 色 面 包 里 千里 坐 的 是 什么 人 ? 

放心 吧 ， 地 理 定 位 跟 “ 黑 社会 老大 ” 真 扯 不 上 半点 关系 。 因 为 就 算 浏 览 右 广 持 地 理 定位 ， 如 
果 你 不 允许 ， 它 也 不 会 把 你 的 行踪 透露 给 浏览 右 (参见 图 12-1 )。 

为 了 得 到 用 户 的 位 置信 息 , 浏览 人 大 会 争取 位 置 提供 商 ( location provider ) 的 帮助 。 比 如 ,Firefox 
浏览 大 使 用 的 是 Google Location Services。 位 置 提供 商 为 查找 位 置 要 付出 很 大 努力 ， 而 且 要 想 尽 
各 种 办 法 。 

对 于 通过 网 线 ( 不 是 无 线 ) 上 网 的 蝎 面 计算 机 来 说 ， 办 法 很 简单 ， 但 结果 不 太 准 确 。 用 户 一 
上 网 ,他 的 信息 就 会 通过 双 绞 线 在 计算 机 或 本 地 网 上 传输 ,进入 电话 线 , 或 者 拨号 连接 (AC 
惧 )， 最 终 到 达 连 接 因 特 网 的 高 层 便 件 设 备 。 这 个 设备 有 一 个 唯一 的 人 PP 地址 ， 徘 这 个 就 能 在 因 特 
网 上 找到 它 。 与 IP 地 址 对 应 ， 还 有 一 个 现实 中 的 邮政 地 址 。 























注意 ”如 果 读 者 对 网 络 知识 比较 熟悉 ， 那 肯定 知道 自己 的 计算 机 与 其 他 计算 机 一 样 ， 都 有 自己 
的 IJP 地 址 。 不 过 ， 这 个 JP 地址 只 是 你 自己 私有 的 ， 目 的 是 区 分 你 的 计算 机 与 同一 网 络 中 
的 其 他 计算 机 ( 比如 厨房 里 的 笔记 本 或 背包 里 的 平板 )。 地 理 定位 不 使 用 私有 IP 地 址 。 
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Firefox ™ | ži 12-1: 网 页 正 想 加 载 位 
| OI HTML5 Demo: geolocation E 置 数 据 , Firefox 1&J 问 你 是 
i e | ED | | http://html5demos.com/geo -|C | x 介 Yr m 次 ( 单 击 Share 
En d || Location )， 还 是 以 后 都 

html5demos.com wants to know your | DF ( Always Share ), 

location. 

抑或 永远 不 允许 (Never 
Learn More... | Share Location MN Share Jo 这 可 不 是 Firefox 
Always Skare — LJ 有 礼貌 ,而 是 Geolocation 











Newer Shere 标准 要 求 浏 览 z DA 须 征 
[x Mae | 得 用 户 同意 ， 才 能 允许 
网 站 访问 其 数据 


@rem built this 1 








位 置 提供 商会 把 这 两 个 信息 综合 起 来 。 首 先 ， 它 找到 你 连接 的 IP 地 址 ， 然 后 ,确定 使 用 该 IP 
地 址 的 路 由 各 的 位 置 。 因 为 这 个 信息 是 间接 的 ， 所 以 使 用 介面 计算 机 时 的 地 理 定位 并 不 准确 。 比 
如 ， 你 在 芝加哥 西 郊 的 肤 个 地 方 上 网 ， 而 你 的 位 置 可 能 会 出 现在 离 市 中 心 不 还 的 地 方 。 不 过 ， 即 
便 是 如 此 不 准确 的 绪 采 也 还 是 有 用 的 。 如 采 你 正在 采 个 地 图 应 用 上 寻找 附近 的 氢 联 店 , 那 你 可 以 
一 下 束 跳 到 自己 感 兴趣 的 区 域 一 一 你 们 家 附近 ， 即 使 离 你 家 还 有 一 段 距 离 。 











注意 ”IP 地 址 定位 是 最 粗略 的 地 理 定位 方法 。 如 果 还 有 更 好 的 数据 源 ， 位 置 提供 商会 择优 选用 。 


如 采 你 在 使 用 笔记 本 或 移动 设备 无 线 上 网 , 那 位 置 提 供 商 会 寻找 你 附近 的 无 线 接 入 点 。 理想 
情况 下 , 位 置 提供 商会 查询 一 个 大 型 数据 库 ， 以 确定 你 周围 几 个 接 入 点 的 确切 位 置 , 然后 再 使 用 
三 角 测 量 法 算出 你 的 位 置 。 

要 是 你 在 用 手机 上 网 , 位 置 提供 商 还 会 采用 类 似 的 三 角 测量 法 , 但 使 用 的 是 信号 发 射 塔 的 位 
置 。 经 过 迅速 而 相对 准确 的 计算 ， 最 终 得 到 的 位 置 误差 大 约 在 1000 米 。( 中 心 城区 等 繁华 地 带 的 
言 号 发 射 塔 相 对 较 多 ， 因 此 地 理 定 位 的 结果 也 更 准确 。) 

最 后 , 很 多 移动 设备 都 配 有 专用 的 GPS 组 件 。GPS 可 以 使 用 卫星 定位 , 误差 只 有 几米 。 但 GPS 
的 缺点 是 速度 慢 ， 耗 电 多 。 而 且 ，GPS 在 高 楼 林立 的 地 区 也 不 好 使 ， 因 为 高 大 的 建筑 物 会 屏蔽 信 
号 。 当 然 ， 到 底 用 不 用 GPS 完 全 取决 于 你 目 己 ， 这 一 点 将 在 后 面 介绍 (12.1.4 ) 

当然 了 ， 还 有 其 他 技术 可 以 用 于 地 理 定位 。 位 置 提供 商会 想 更 多 办 法 获得 位 置信 息 ， 比 如 
RFID H. Eri, LN MH Google Maps 设 置 的 cookie 等 。 
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提示 “还 可 以 使 用 另 一 个 工具 来 修改 自己 的 位 置 。 比 如 , 有 个 Firefox 揪 件 叫 Geolocater( http://addons. 
mozilla.org/en-us/firefox/addon/geolocater ), 它 可 以 在 网 站 想 共 享 你 的 位 置 时 ,告诉 Firefox 提 
供 哪 里 的 位 置信 息 。 利 用 这 个 工具 甚至 可 以 伪造 位 置 ， 比 如 假装 自己 在 德国 洛 瓦 ， 而 实 
际 上 是 在 荷兰 。 


关键 在 于 , 无 论 你 通过 什么 方式 上 网 一 一 就 算是 你 使 用 台式 机 , 地理 定 位 都 可 以 大 概 地 找到 
你 。 而 如 果 你 使 用 能 接收 电话 信和 号 或 者 配 有 GPS 芯片 的 设备 ， 地 理 定 位 的 坐标 将 惊人 地 精确 。 


怎么 使 用 地 理 定 位 


在 理解 了 第 一 个 大 问题 一 一 地 理 定位 的 工作 原理 之 后 , 接 下 来 就 要 面临 第 二 个 问题 ， 即 为 
什么 要 使 用 地 理 定位 ? 


要 回答 这 个 问题 ， 必 须 明 白地 理 定 位 返回 的 结果 是 一 个 人 所 在 位 置 的 坐标 , 仅 此 而 已 。 你 
需要 利用 这 个 简单 但 却 基 本 的 信息 ， 进一步 取得 更 详细 的 位 置 数据 。 这 些 数据 可 能 来 自 Web 
务 器 ( 问 大 型 的 服务 器 端 数据 库 ), 或 者 其 他 地 理 位 置 Web 服务 ( 比如 Google 
Maps )。 
举 个 例子 , 如 果 你 在 现实 中 有 一 家 公司 , 那么 可 能 要 将 访客 的 位 置 与 你 自己 的 位 置 进行 比 
较 。 然 后 才 知 道 哪个 位 置 最 近 。 再 比如 ， 要 是 你 正在 开发 一 款 社 交 应 用 ,那么 可 以 获得 一 群 人 
的 位 置信 息 ， 显 示人 他们 彼此 距离 有 多 近 。 当 然 , 还 可 以 根据 用 户 的 位 置信 息 ， 向 他 们 推荐 一 些 
服务 ， 比 如 布 兽 克 林 最 近 的 巧克力 店 ， 或 者 最 近 的 出 所 。 无论 如 何 , 访客 的 地 理 位 置 坐标 ， 只 
有 在 跟 更 多 的 地 理 数据 结合 起 来 时 才 有 意义 。 
12.1.5 PA Google Maps 为 例 介 绍 地 理 定位 的 应 用 。 至 于 其 他 公司 的 地 图 应 用 或 地 理 位 
置 服务 ， 我 们 就 不 多 介绍 了 。 


12.1.2 ”查找 访客 的 坐标 


地 理 定位 功能 实际 上 是 非常 简单 的 。 说 到 底 , 主要 就 是 navigator.geolocation 对 象 的 三 个 方 
ik: getCurrentPosition()、watchpPosition() 和 clearWatch()。 





注意 ”可 能 a 熟悉 ， 它 只 是 JavaScript 众 多 对 象 中 的 一 个 ， 它 的 属性 中 保 
ss 前 浏览 器 及 其 能 力 的 信息 。 Xv. 最 有 用 的 属性 莫 过 于 navigator.userAgent， 包 
全 了 关于 浏览 器 的 所 有 细节 ， 如 版 本 号 、 所 在 操作 系统 等 


要 取得 访客 的 位 置 ， 可 以 调用 getCurrentPosition() 方 法 。 当 人 然 ， 查 找 位 置 不 会 立即 返 
结果 , 浏览 妖 也 不 想 锁 定 页 面 等 得 位 置 数 据 。 所 以 ，getCurrentPosition() 方 法 是 异步 的 ， 
它 会 立即 执行 ， 但 不 会 阻塞 其 他 代码 。 完 成 地 理 定位 后 ， 它 会 触发 男 一 段 代码 来 处 理 返 回 的 
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结果 。 
UR. 地理 定位 会 通过 一 个 事件 来 告诉 我 们 它 完 成 了 工作 , 这 与 图 片 加 载 完毕 或 文本 文件 读 取 
完毕 时 触发 onLoad 事 件 类 似 ， 对 吗 ? TET» JavaScript 在 这 里 有 点 不 一 致 。 换 名 话说， 在 调用 
getCurrentPosition() 时 ， 你 要 提供 一 个 完成 函数 。 
下 面 就 是 一 个 例子 ， 


navigator.geolocation.getCurrentPosition( 
function(position) { 
alert("You were last spotted at (" + position.coords.latitude + 
"," + position.coords.longitude + ")"); 
} 
); 


运行 这 段 代 码 ， 会 调用 getCurrentPosition() 并 传 给 它 一 个 函数 。 浏 览 兹 确定 了 位 置 之 后 ， 
会 触发 传人 的 函数 ， 然 后 显示 一 个 对 话 框 。 图 12-2 展 示 了 Internet Explorer 中 看 到 的 结 








Wy | 区]2-2. E: Eo, i ben 
Wy | SmpleGeolocation-htmi (X| (uus | 透露 你 的 位 置信 息 。 下 : 结果 是 你 在 地 球 上 的 


E Simple Geolacation | | 坐标 


The search has begun. 


SimpleGeoclocation.html wants to track your physical location. ^ 


Allow Se 














为 了 计 代 码 更 清晰 ， 可 以 把 完成 图 数 的 定义 挪 到 getCurrentPosition() 调 用 语句 的 外 面 来 ， 
如 下 所 示 : 


function geolocationSuccess(position) { 
alert("You were last spotted at (" + position.coords.latitude + 
"," * position.coords.longitude + ")"); 


) 
然后 ， 在 调用 getCurrentPosition() 时 再 传人 也 数 名 即 可 : 
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navigator.geolocation.getCurrentPosition(geolocationSuccess); 

测试 的 时 候 , 需要 使 用 支持 地 理 定位 的 浏览 各 ,并 且 允 许 网 页 访问 你 的 数据 。 男 外 ， 建 议 你 
把 页 面 上 传 到 测试 服务 硕 ， 然 后 再 通过 浏 览 硕 打开 。 和 否则 ， 有 可 能 遇 到 奇怪 的 现象 ( 例如， 地理 
定位 无 法 处 理 错误 )， 而 有 些 浏览 硕 〈 比如 Chrome ) 根本 不 会 检测 你 的 位 置 。 

“地 理 坐 标 对 我 有 什么 用 吗 ? ” 问 得 好 。 我 们 马上 会 介绍 怎么 利用 这 个 地 理 数 据 〈 见 12.1.5 
T. 但 在 此 之 前 ， 有 必要 先 了 解 一 些 错误 处 理 和 地 理 定位 设置 的 知识 。 





确定 地 理 定 位 的 精确 程度 

调用 的 getCurrentPosition() 成 功 返 回 后 ,， position 对 象 会 包含 两 个 属性 : timestamp ( 确 
定 地 理 位 置 的 时 间 ) 和 coords〈 地 理 坐 标 )。 

从 上 面 的 例子 可 以 看 到 ,coords 属性 是 一 个 对 象 ， 包含 latitude ( 纬度 ) 和 longitude ( 经 
度 ) 属性 ,用 以 确定 你 在 地 球 上 的 位 置 。 不 过 ，cootrds 属性 还 有 另外 一 些 信息 ， 比 如 altitude 
(海拔 高 度 )、heading ( 移动 方向 ) 和 speed ( 移动 速度 )， 但 目前 尚未 有 浏览 器 支持 它们 。 

更 有 意思 的 是 accuracy( 精度 ) 属性 ， 用 米 为 单位 表示 地 理 定位 信息 的 准确 程度 。( 不 要 
搞 混 ，accuracy 属性 的 值 越 小 ， 表 示 地 理 定位 越 精确 。) 例如 ，accuracy 等 于 2135 米 ， 约 1.3 
英里 ， 表 示 地 理 定位 在 该 范围 内 找到 了 当前 访客 的 位 置 。 为 了 好 理解 ， 可 以 想象 一 个 圆 ， 圆 心 
是 返回 的 地 理 坐 标 ， 半 径 是 213$ 米 ， 而 访客 可 能 就 在 这 个 圆 形 区 域 中 的 某 个 地 方 。 

利用 accuracy 属性 可 以 确定 哪些 地 理 定 位 结果 不 能 用 。 比 如 ， 一 个 结果 的 精确 度 为 几 万 
米 ， 那 跟 没 有 定位 也 差不多 了 。 

if (position.coords.accuracy > 50000) { 


results.innerHTML - 
"This guess is all over the map."; 


} 
此 时 ， 可 能 需要 通知 用 户 无 法 准确 定位 ， 或 者 为 用 户 提供 一 个 文本 框 ， 让 他 自己 输入 位 置 
信息 。 


12.1.3 ”处 理 错误 


要 是 访客 不 愿意 共享 他 们 的 位 置 数据 , 那 地 理 定 位 就 不 会 返回 位 置信 息 。 在 这 种 情况 下 , TR 
本 不 会 调用 完成 函数 ， 而 页 面 也 没有 办 法 告诉 你 浏览 妖 是 在 继续 挖掘 数据 ， 还 是 过 到 了 错误 。 为 
了 解决 这 个 问题 ， 可 以 在 调用 getCurtrentpPosition() 时 传人 两 个 图 数 。 第 一 个 函数 在 页 面 成 功 取 
得 数据 时 调用 ， 第 二 个 函数 在 地 理 定位 因 错 误 而 终止 时 调用 。 

下 面 就 是 一 个 同时 传 入 完成 函数 和 错误 函数 的 例子 : 


// 保 存 显 示 结 果 的 页 面 元 素 
var results; 




















window.onload = function() { 
results = document.getElementById("results"); 
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// 如 果 浏 览 器 支持 地 理 定位 ， 取 得 访客 的 位 置 
if (navigator.geolocation) { 
navigator.geolocation.getCurrentPosition( 
geolocationSuccess, geolocationFailure 


); 
results.innerHTML = "The search has begun."; 
j 
else 1 
results.innerHTML = "This browser doesn't support geolocation."; 
j 
5 


function geolocationSuccess(position) { 
results.innerHTML = "You were last spotted at (" + 
position.coords.latitude + "," + position.coords.longitude + ")'; 


j 


function geolocationFailure(positionError) { 
results.innerHTML = "Geolocation failed."; 


) 

3s] FREE AZT, Iis ERU PRU FEIN — MERR R, ICT RALIS TE: code 和 
message。 其 中 ，code 属 性 是 一 个 数值 ， 表 示 问 题 类 型 ， 而 message 中 包含 着 对 问题 的 简短 描述 。 
一 般 来 说 ，message 属 性 多 用 于 测试 ， 而 code 属 性 用 于 确定 如 何 进 行 下 一 步 的 处 理 。 

下 面 是 修改 后 的 错误 函数 ， 检 测 了 code 属 性 所 有 可 能 的 值 : 

function geolocationFailure(positionError) { 


if (positionError.code -- 1) { 


results.innerHTML - 
"You decided not to share, but that's OK. We won't ask again."; 





else if (positionError.code -- 2) { 


results.innerHTML - 
"The network is down or the positioning service can't be reached."; 


} 
else if (positionError.code == 3) { 
results.innerHTML - 
"The attempt timed out before it could get the location data."; 
} 
else { 
results.innerHTML = 
"This the mystery error. We don't know what happened."; 
} 


j 


qu 


如 果 你 是 在 本 地 计算 机 (而 非 真正 的 Web 服 务 器 ) 上 测试 页 面 ， 那 么 在 拒绝 共享 位 置 1 
息 后 ， 不 会 触发 错误 函数 。 


hi *» ——— 
fu; 
42. re 
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12.1.4 设置 地 理 定 位 选项 


到 目前 为 止 , 我 们 已 经 知道 调用 getCurrentpPosition() 时 可 以 传人 两 个 参数 : 一 个 成 功 函 数 ， 
一 个 失败 函数 。 实 际 上 ,还 可 以 再 传 入 一 个 参数 ， 这 个 参数 是 一 个 对 和 象 ， 用 于 设置 某 些 地 理 定位 
选项 。 

可 以 设置 三 个 选项 , 每 个 选项 对 应 地 理 定 位 选项 对 象 的 一 个 不 同 的 属性 。 这 三 个 选项 可 以 只 
设置 一 个 ， 也 可 以 设置 多 个 。 下 面 这 个 例子 设置 了 和 名 为 enableHighAccuracy 的 选项 : 


navigator.geolocation.getCurrentPosition(geolocationSuccess, 
geolocationFailure, (enableHighAccuracy: true}); 


下 面 这 个 例子 则 设置 了 三 个 选项 : 


navigator.geolocation.getCurrentPosition( 
geolocationSuccess, geolocationFailure, 
(enableHighAccuracy: true, 

timeout: 10000, 

maximumAge: 60000) 


); 

这 两 个 例子 都 使 用 JavaScript 对 象 字 面 量 设置 了 地 理 定位 选项 ,如 果 你 对 什么 是 对 象 字 面 量 不 
AR, Wn BE. 

好 了 ， 这 些 属性 都 是 什么 意思 呢 ? enableHighAccuracy 属 性 要 求 高 精度 的 GPS 位 置 检测 HH 
要 设置 文 持 〈 而 且 用 户 同 意 ) 除非 确实 需要 精确 的 坐标 ， 否 则 不 要 设置 这 个 选项 ， 因 为 这 个 过 
程 很 费 电 。 而 enableHighAccuracy 的 默认 值 ， 也 就 是 不 设置 它 时 的 值 ， 是 false。 

第 二 个 timeout 属 性 用 于 设置 在 最 终 放弃 之 前 ,等 每 位 置 数 据 的 时 间 , 以 肢 秒 计 。 这 里 的 10 000 
训 秒 的 意思 就 是 最 多 等 10 秒 钟 . 用 户 按 下 同意 共 孚 数据 的 按钮 时 , 计时 开始 。 默 认 情 况 下 ,timeout 
的 值 是 (0， 也 就 是 页 面 会 无 限期 地 等 下 去 ， 不 会 触发 超时 错误 。 

最 后 一 个 maximumAge 属 性 用 于 绥 存 位 置 数据 。 比 如 ， 把 maximunAge 设 置 为 60 000 毫 秒 ， 之 前 
的 数据 最 多 保存 1 分 钟 。 这 样 就 可 以 减少 重复 调用 地 理 定 位 的 次 数 ， 但 在 用 户 移动 的 时 候 ， 时 间 
越 长 结果 也 就 越 不 精确 。 默 认 情 部下 ，maximumAge 的 值 是 0， 意 思 是 不 使 用 缓存 的 地 理 数据 。( 也 
可 以 将 其 设置 为 一 个 特殊 的 值 Infinity， 表 示 只 要 有 绥 存 的 数据 ， 就 使 用 该 数据 ， 无 论 时 间 多 久 
都 行 。) 









































理解 对 象 字 面 量 

第 7 章 曾 介绍 过 使 用 JavaScript 函数 创建 对 象 的 技术 ， 函 数 相 当 于 对 象 的 模板 。7.3.1 节 ， 
我 们 创建 了 一 个 Circle() 函 数 ， 使 用 它 又 创建 了 若干 圆圈 对 象 。 后 来 ，7.4.2 节 又 用 同样 的 方 
法 创建 了 球 对 象 。 

函数 是 定义 构成 对 象 的 不 同 组 成 部 分 的 最 佳 手 段 , 能 够 让 代码 更 有 条 理 , 还 可 以 简化 编码 
工作 。 但 有 时 候 ， 我 们 需要 一 种 简单 快捷 的 创建 对 象 的 方式 ， 因 为 只 需 用 到 一 个 对 象 。 此 时 ， 
最 好 是 使 用 对 象 字 面 量 ， 也 就 是 一 对 大 括号 语法 。 

换 句 话说 , 创建 对 娟 字面 量 ， 首先 要 写 一 个 左 大 括号 ,然后 是 过 号 分 隔 的 属性 名 值 对 ， 然 
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后 再 写 一 个 右 大 括号 。 为 了 让 代码 更 好 理解 ， 可 以 任意 添加 空格 和 换行 ， 但 这 些 不 是 必需 的 。 
下 面 就 是 一 个 对 象 字面 量 的 例子 : 
var personObject = { 
firstName-"Joe", 
lastName-"Grapta" 
}; 
每 个 属性 要 分 别 指定 属性 名 和 初始 值 。 这 样 ， 上 面 的 代码 就 把 personObject.firstName 
设置 成 了 "Joe"， 把 person0bject.lastName 设置 成 了 "Grapta"。 
而 在 前 面 的 例子 中 ， 我 们 使 用 了 对 象 字 面 量 向 地 理 定位 机 制 发 送 了 信息 。 只 要 在 这 里 使 用 
正确 的 属性 名 ( 即 getCurrentPosition() 方 法 能 接受 的 属性 名 ), 传 入 的 对 象 字 面 量 就 能 起 作用 。 
XY WEG ADOUPGeE. X] $ GSC VUA JavaScript 中 的 自 定 义 对 象 相 关 的 更 多 内 容 , 请 参考 : 


http://www.]javascriptkit.com/ javatutors/oopjs.shtml 。 


12.1.5 显示 地 图 


取得 用 户 的 地 理 坐 标 当 然 值 得 高 兴 , 但 除非 你 能 用 它 实现 更 有 用 的 功能 , 否则 这 种 兴奋 功 也 
保持 不 了 多 久 。 精 通 地 理 定 位 的 老手 深 知 ， 通 过 位 置信 息 可 以 挖 握 出 很 有 价值 的 东西 。( 这 里 的 
关键 在 于 取得 坐标 ， 然 后 在 Web 应 用 中 将 其 转换 为 一 种 有 用 的 形式 。) 我 们 知道 ， 有 很 多 不 错 的 
Web 应 用 ， 比 如 Google Maps。 事 实 上 据 估 计 ，Google Maps 是 人 们 日 常生 活 中 使 用 率 最 高 的 Web 
应 用 服务 ， 而 使 用 它 的 目的 千差万别 。 

比如 ， 可 以 使 用 Google Maps 创 建 一 个 地 图 ， 以 任何 大 小 显示 世界 上 的 任何 一 个 地 方 。 你 可 
以 控制 访客 能 对 地 图 进行 什么 操作 ,生成 行车 线路 ,而 最 有 用 的 则 是 把 目 定 义 的 数据 点 放 到 地 图 
上 面 。 比 如 ， 可 以 用 Google Maps 创 建 一 个 页 面 ， 显 示 你 们 公司 的 位 置 ， 或 者 标记 出 徒步 到 曼 哈 
顿 岛 旅行 必须 参观 的 景点 。 在 使 用 Google Maps 开 发 之 前 ， 请 先 看 看 这 份 文档 : http://code. 


google.com/apis/maps/documentation/javascript. 























注意 Google Maps 可 以 免费 使 用 , 而 且 可 以 在 商业 网 站 中 使 用 , 只 要 你 不 对 网 站 用 户 收 费 就 行 。 
(如 果 你 对 访客 收费 ，Google 还 有 付费 地 图 服务 ， 你 可 以 买 来 使 用 。) 虽然 Google Maps 在 
许可 条 款 中 明确 表示 保留 在 地 图 上 显示 广告 的 权利 ， 但 至 今 还 没有 显示 广告 。 





图 12-3 展 示 了 前 面 地 理 定 位 页 面 的 增强 版 ， 即 取得 用 户 坐 标 后 ， 在 地 图 上 显示 出 他 的 位 置 。 
创建 这 个 页 面 很 简单 。 首 先 ， 链 接 到 Google Mpas API 脚 本 ， 而 且 要 把 它 放 在 使 用 地 图 功能 
的 目 定 义 脚 本 前 头 : 
<head> 
«meta charset-"utf-8"» 


«title»Geolocation Map«/title» 
«script src-"http://maps.google.com/maps/api/js?sensor-true"»«/script» 








«/head» 


306 | 第 12 章  mRER JavaScript 技术 


一 图 12-3 : 地 理 定 位 和 
| — Ə & cAHTMLSXChapter 12\GeolocationMap.html f Ys io? Google Maps E EN 个 强 
E) oem Me s 有 力 的 组 合 。 只 需 几 行 
Now you're on the map. J avaScript 代 码 ， 就 可 以 
生成 任何 位 置 的 地 图 
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然后 ， 需 要 一 个 <div> 元 素 ， 让 它 盛 放 动 态 生 成 的 地 图 。 为 了 方便 引用 ， 还 要 给 它 一 个 ID: 


«body» 
«p id-"results"»Where do you live?«/p» 
«div id-"mapSurface"»«/div» 

</body> 


这 样 就 可 以 给 它 设置 样式 ， 声 明 地 图 的 大 小 : 
#mapSurface { 
width: 600px; 
height: 400px; 
border: solid 1px black; 
j 
使 用 Google Maps 的 准备 工作 就 做 好 了 。 接 下 来 首先 要 考虑 显示 地 图 。 我 们 这 个 例子 是 在 页 
面 加 载 时 就 显示 了 地 图 ， 因 此 要 使 用 成 功 或 失败 函数 。( 执行 失败 函数 并 不 总 味 着 访客 不 能 在 你 
的 页 面 中 使 用 地 图 ,而 只 是 说 你 没有 取得 访客 的 当前 位 置 。 这 时 候 还 是 可 以 显示 地 图 ， 只 不 过 显 
示 的 是 坎 认 位 置 。) 
以 下 就 是 页 面 加 载 时 运行 的 代码 ， 首 先 创建 地 图 ， 然 后 通过 地 理 定 位 查找 用 户 位 置 : 


var results; 
var map; 
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window.onload = function() { 
results - document.getElementById(" results"); 


// 设 置地 图 选项 。 这 个 例子 设置 了 起 始 缩放 级 别 和 地 图 类 型 
// 要 了 解 所 有 可 用 的 选项 ， 读 者 可 以 查看 Google Maps 的 文档 
var myOptions = ( 

zoom: 13, 

mapTypeId: google.maps.MapTypeId.ROADMAP 


32 


// 使 用 前 面 设置 的 选项 来 创建 地 图 
map = new google.maps.Map(document.getElementById("mapSurface"), myOptions); 


// 尝 试 取得 用 户 的 当前 位 置 
if (navigator.geolocation) { 
navigator.geolocation.getCurrentPosition(geolocationSuccess, 
geolocationFailure); 


results.innerHTML = "The search has begun."; 

else { 
results.innerHTML = "This browser doesn't support geolocation."; 
goToDefaultLlocation(); 

} 


15 


提示 Google Maps 的 这 个 文档 http://tinyurl.com/36aemmr 展 示 了 进行 地 理 定 位 的 两 种 方式 : 使 用 
本 章 介 绍 的 地 理 定位 功能 ， 或 者 用 Google Gears 作 为 后 备 机 制 (参见 12.1 节 )。 





即便 通过 以 上 代码 创建 了 地 图 ， 还 不 能 在 页 面 上 看 到 它 。 因 为 我 们 还 没有 设置 地 理 位 置 呢 。 
要 设置 地 理 位 置 ， ee 然后 再 通过 地 图 的 setCenter() 方 法 把 该 点 放 
到 地 图 上 。 以 下 就 是 使 用 访客 坐标 创建 坐标 点 并 将 该 点 放 到 地 图 上 的 代码 : 


function geolocationSuccess(position) { 
// 把 地 理 定 位 的 位 置 转换 为 LatLng 对 象 
location = new google.maps.LatLng( 
position.coords.latitude, position.coords.longitude); 











// 在 地 图 上 显示 这 个 点 的 位 置 
map.setCenter(location); 
有 了 这 些 代 码 就 可 以 显示 地 图 了 ,结果 如 图 12-3 所 示 。 除 此 之 外 ， 还 可 以 在 地 图 上 添加 一 些 
辅助 功能 ， 比 如 其 他 位 置 或 信息 气泡 。 就 拿 创 建 信息 气泡 为 例 ， 需 要 创建 一 个 Infowindow 对 象 。 
而 图 12-3 中 的 信息 气泡 就 是 用 下 面 的 代码 创建 的 : 


// 创 建 信息 气泡 并 设置 其 文本 内 容 和 地 图 坐标 

var infowindow = new google.maps.InfoWindow(); 
infowindow.setContent("You are here, or somewhere thereabouts."); 
infowindow.setPosition(location); 

















// 显 示 地 图 气泡 
infowindow.open(map); 
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results.innerHTML = "Now you're on the map."; 


j 

最 后 ， 如 果 浏 览 硕 不 文 持 地 理 定 位 , 那么 处 理 方法 也 是 类 似 的 。 只 不 过 是 使 用 一 个 你 目 己 知 
道 的 坐标 来 创建 地 图 而 已 。 

function geolocationFailure(positionError) { 


goToDefaultLocation(); 
} 


function goToDefaultLocation() { 
// 这 里 显示 纽约 地 图 
var newYork = new google.maps.LatLng(40.69847, -73.95144); 


map.setCenter(newYork); 


j 


12.1.6 RERO ETE JI 


我 们 的 例子 一 直 在 使 用 getCurrentPosition() 方 法 ， 这 个 方法 可 以 说 是 地 理 定 位 的 “心脏 ”。 
而 除 这 个 方法 之 外 , 地 理 定 位 对 象 还 有 两 个 方法 ,用 于 跟踪 访客 的 位 置 ， 让 你 的 页 面 在 用 户 位 置 
改变 时 能 收 到 通知 。 

首先 是 watchPosition() 方 法 , 它 与 getCurrentPosition() 看 起 来 极为 相似 , 也 接收 三 个 参数 : 
成 功 函 数 ( 唯一 必需 的 参数 )、 失 败 函 数 和 选项 对 象 : 

navigator.geolocation.watchPosition(geolocationSuccess, geolocationFailure); 

[HwatchPosition()-EgetCurrentPosition()HJb€ YE T , MAn BE e IX AZ EJ PERSA 
不 仅 初 始 取得 位 置 时 会 触发 ， 而 且 以 后 每 次 检测 到 新 位 置 都 会 触发 。( 但 你 无 法 控制 设备 多 长 时 
间 检 测 一 次 新 位 置 。 你 只 要 知道 ,位 置 不 改变 , 设备 不 会 给 你 发 通知 ， 只 有 位 置 改变 它 才 会 给 你 
发 通知 。) 对 各 面 计算 机 而 言 ， 因 为 它 不 会 动 ， 所 以 watchPosition() 与 getCurrentPosition() 方 法 
实际 上 作用 相同 。 

与 getCurrentposition() 不 同 , watchposition() 返 回 一 个 数值 。 如 果 你 不 想 再 关注 位 置 变 化 ， 
可 以 把 它 返 回 的 这 个 数值 传 给 clearWatch() 方 法 。 当 然 ， 你 也 可 以 不 这 么 做 ， 而 在 用 户 切 换 到 其 
他 页 面 之 前 一 耳 接 收 通 知 : 


var watch = navigator.geolocation.watchPosition(geolocationSuccess, 
geolocationFailure); 
































navigator.geolocation.clearWatch(watch); 


12.2 Web Workers 


想 当 初 ，JavaScript 刚 网 问世 的 时 候 ， 没 有 人 担心 它 的 性 能 。JavaScript 只 是 一 种 简单 的 语言 ， 


12.2 ”Web Workers | 309 








可 以 在 网 页 中 运行 小 段 脚本 , 而且 只 是 非 专 业 程 序 员 的 玩具 。 谁 也 没有 把 它 当 做 一 门 能 摊 起 门面 
的 正规 语言 。 

转眼 20 年 过 去 了，JavaScript 已 经 成 为 Web 开 发 领域 的 王者 。 只 要 想 给 网 页 添加 交互 性 ， 开 发 
人 员 就 会 用 到 它 ， 无 论 是 游戏 还 是 地 网 ， 或 者 购物 车 和 漂亮 的 表单 。 然 而 ， 从 许多 方面 来 看 ， 
JavaScript 语 言 与 它 现 在 的 地 位 相 比 ， 仍 然 还 有 一 些 不 相称 的 地 方 。 

比如 ，JavaScript 处 理 大 计算 量 任务 时 就 会 导致 问题 。 对 于 多 种 现代 编程 语言 来 说 , 这 种 大 计 
算 量 的 工作 都 是 在 后 台 完 成 的 ， 而 使 用 应 用 的 人 不 会 停 下 来 ， 也 不 会 受到 干扰 。 但 在 JavaScript 
中 ， 由 于 代码 始终 都 在 前 台 和 运行， 因此 耗费 时 间 的 代码 会 打 断 用 户 ， 阻 塞 页 面 ， 直 到 任务 完成 。 
对 这 个 问题 视而不见 ， 就 会 导致 访客 厌烦 ， 其 至 永 不 再 光顾 你 的 网 页 。 
































注意 为 解决 JavaScript 阻 寨 页 面 的 问题 ,很 多 一 线 开发 人 员 想 出 了 各 种 招 。 比 如 ， 使 用 
setInterval() 或 setTimeout() 把 大 任务 分 成 小 任务 ， 每 次 只 运行 一 个 小 任务 。 这 个 办 法 
非常 适合 菜 些 任务 ( 比如， 对 在 画布 上 实现 动画 就 很 合适 ， ALTAE) 可是， 对 于 不 能 
拆 分 而 又 耗 时 很 长 的 任务 ， 这 个 办 法 会 增加 复杂 性 和 困扰 。 











HTML5 提 出 了 更 好 的 解决 方案 ， 一 个 叫 Web Worker 的 对 象 ， 能 够 在 后 台 完 成 工作 。 要 是 你 
有 比较 费时 的 工作 ， 就 可 以 创建 一 个 新 的 Web Worker 对 和 象 ， 把 要 运行 的 代码 交 给 他 ,然后 让 它 运 
行 就 好 了 。 在 它 工 作 期 间 ， 还 可 以 通过 传递 文本 消息 这 种 安全 但 受 限 的 方式 与 它 通信 。 

表 12-2 给 出 了 当前 浏览 硕 对 Web Worker 的 支持 情况 。 


表 12-2 ”浏览 器 对 Web Worker 的 支持 
IE Firefox Chrome Safari Opera Safari iOS Android 
最 低 版 本 10 3:5 3 4 10.6 — - 


* 本 书写 作 时 ，IE10 只 是 一 个 beta 版 。 








Web Worker 安 全 措施 

在 JavaScript 中 使 用 Web Worker 可 以 在 后 台 运 行 代码 ， 同 时 在 前 台 也 做 一 些 事 。 这 就 带 
来 了 编程 领域 中 的 一 个 尽 人 展 知 的 问题 : 如 果 应 用 同时 可 以 做 两 件 事 , 那么 其 中 一 件 事 有 可 能 
干扰 另 一 件 事 。 

这 个 问题 会 在 两 段 代码 争 抢 同一 处 数据 时 发 生 。 比如 ,其 中 一 段 代 码 想 读 取 菜 些 数据 ,而 
另 一 段 代 码 则 想 写 入 该 数据 , 或 者 两 段 代码 同时 想 设置 一 个 变量 , 最 终 导 致 一 个 值 惟 盖 另 一 个 
值 , 再 或 者 两 段 代码 以 不 同方 式 操作 同一 个 对 象 , 造成 对 象 状态 前 后 不 一 致 。 类 似 的 问题 很 多 ， 
没 办 法 一 一 列举 和 解决 。 通 常 ， 一 个 多 线程 应 用 〈 即 在 多 个 线程 上 执行 不 同 代码 的 应 用 ) 在 测 
试 时 运行 得 很 好 ， 但 一 投入 正和 党 使用， 就 会 出 现 令 人 头疼 的 数据 不 一 致 问题 。 

现在 好 了 ， 有 了 JavaScript 的 Web Worker， 你 就 不 必 担 心 这 个 问题 了 。 因为 它 不 允许 你 
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在 网 页 之 间或 Web Worker 之 间 共 享 数 据 。 你 可 以 把 数据 从 网 页 发 送 到 Web Worker 或 者 相反 ), 
但 JavaScript 会 自动 复制 一 份 ， 并 发 送 该 副本 。 这 意味 着 不 同 的 线程 不 能 同时 占用 相同 的 内 存 
区 域 ， 也 不 会 性 致 微妙 的 问题 。 当 然 ， 这 种 简化 的 模型 也 会 限制 Web Worker 的 能 力 ， 但 能 
上 受到 细微 的 限制 却 能 换 来 安全 ， 免 得 那些 编程 高 手 搬 起 石头 砸 自己 的 脚 。 


注意 ”如果 在 本 地 文件 中 运行 Web Worker， 需 要 在 Chrome 中 设置 -allow-file-access-from- 
files, 否则 会 失败 。 要 设置 这 个 参数 ,最 简单 的 办 法 是 创建 一 个 新 的 Chrome 快 捷 方 
式 ， 然 后 把 这 个 参数 附加 到 命令 的 末尾 。 详 细 说 明 请 参见 http://tinyurl.com/3j4dgcb。 


12.2.1 费时 的 任务 


除非 用 于 那些 真正 费时 的 任务 ， 否 则 很 难 发 挥 Web Worker 的 优势 。 换 句 话 说， 不 应 该 用 Web 
Worker 来 执行 简单 的 任务 。 而 对 于 那些 让 CPU 不 堪 重 负 ， 又 会 拖延 浏览 器 的 计算 任务 ， 使 用 Web 
Worker 的 结果 会 大 不 相同 。 比 如 图 12-4 所 示 的 搜索 素数 的 任务 ， 我 们 想 找到 某 个 区 间 内 的 素数 。 
代码 很 简单 ， 但 这 个 任务 需要 的 计算 量 很 大 ， 因 为 要 进行 较 长 时 间 的 数值 运算 。 








图 12-4: 选择 一 个 区 间 ， 然 后 单 击 按 

钮 开始 搜索 。 区 间 窄 ( 如 1 ~ 50000 ), 

任务 很 快 能 完成 ， 不 会 干扰 任何 人 。 
Do a prime number search from 1 to 50000 . i 但 汇 5 围 更 大 的 搜索 ( 如 1 ~ 500 000 )， 


eiie LIEU PR RA. 这 时 候 
能 单 击 、 滚 动 , 无 法 执行 任何 操作 。 


« S, 7, 11, 13, 17, 19, 23; 29, 31, 37, 41, 43, 47, 53, 89, 61, 67, 71, 73, 79. 83, 89, 97, 101, 


, 107, 103, 113, 127, 131, 137, 139, 149, 151, 157, 163, 167, 173, 179, 181, 191, 193, 197, L | E M NUR 


E S DLTHI 7c 158 


, 211, 223, 227, 229, 233, 239, 241, 251, 257, 263, 269, 271, 277, 281, 283, 293, 307. 311, us 
. 317, 331, 337, 347, 349, 353, 359, 367, 373, 379, 383, 389, 397, 401, 409, 419, 421, 431, 脚本 的 警告 F4» 
, 439, 443, 449, 457, 461, 463, 467, 479, 487, 491, 499, 503, 509, 521, 523, 541, 547,557 
, 569, 571, 577, 587, 593, 599, 601, 607, 613, €17, 619, 631, 641, 643, 647, 653, 659, 661, 
, 677, 683, 6931, 701, 709, 719, 727, 733, 739, 743, 751, 757, 761, 769, 773, 787, 797, 809, 
, 821, 823, 827, 829, 839, 853, 857, 859, 863, E77, 881, 883, 887, 907, 911, 919, 929, 937 
, 947, 953, 967, 971, 977, 983, 991, 997, 1009, 1013, 1019, 1021, 1031, 1033, 1039, ' 049, 
. 1061, 1063, 1069, 1087, 1091, 1093, 1097, 1103, 1109, 1117, 1123, 1129, 1151, 17 53, 
, 11171,1181, 1187, 1193, 1201. 1213, 1217, 1223, 1229, 1231, 1237, 1249, 1259, 1277 
.1283,1289, 1291, 1297, 1301, 1303, 1307, 1319, 1321, 1327, 1361, 1367, 1373, 1381, 
. 1409, 1423, 1427, 1429, 1433, 1439, 1447, 1451, 1453, 1459, 1471, 1481, 1483, 1487 
. 1493, 1499, 1511, 1523, 1531, 1543, 1549, 1553, 1559, 1567, 1571, 1579, 1583, 1597, 
. 1607, 1609, 1613, 1619, 1621, 1627, 1637, 1657, 1663, 1667, 1669, 1693, 1697, 1699, 
. 1721, 1723, 1733, 1741, 1747, 1753, 1759, 1777, 1783, 1787, 1789, 1801, 1811, 1823, 
. 1847, 1861, 1867, 1871, 1873, 1877, 1879, 1889, 1901, 1907, 1913, 1931, 1933, 1349, 
. 1973, 1979, 1987, 1993, 1997, 1999, 2003, 2011, 2017, 2027, 2029, 2039, 2053, 2063, 
2069, 2081, 2083, 2087, 2089, 2099, 2111, 2113, 2129, 2131, 2137, 2141, 2143, 2153, 2^ 61, 
a B 2 - ca z E c 





The results are here! 
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很 明显 ,可 以 使 用 Web Worker 来 改进 这 个 页 面 。 但 在 此 之 前 , 我 们 先 看 一 看 这 个 例子 的 标记 
和 JavaScript 代 码 。 

标记 不 长 ， 也 很 简单 。 页 面 使 用 了 两 个 cinput> 控 件 ， 都 是 文本 框 。 还 有 一 个 用 于 搜索 的 按 
钮 和 两 个 cdiv> 元 素 ， 两 个 <div> 分 别 用 于 保存 结 来 和 显示 状态 消 县 。 以 下 就 是 <body> 元 系 中 的 全 
部 标记 : 

<p>Do a prime number search from «input id-"from" value-"1"» to 


«input id-"to" value-"20000"».«/p» 
«button id-"searchButton" onclick-"doSearch()"»Start Searching«/button» 





«div id-"primeContainer"» 
</div> 


<div id="status"></div> 
Z5 RATE SR AJ«div»7038 RIERA RA, RACIE T [BIAE m3 RI T EUN P RE, S 
设置 了 overflow 和 overflow-x 属 性 以 添加 垂直 滚动 条 (但 没有 水 平 滚 动 条 ): 


#primeContainer { 
border: solid 1px black; 
margin-top: 20px; 
margin-bottom: 10px; 
padding: 3px; 
height: 300px; 
max-width: 500px; 
overflow: scroll; 
overflow-x: hidden; 
font-size: x-small; 


) 

这 个 例子 的 JavaScript 代 码 有 点 长 ， 可 并 不 复杂 。 代 但 会 取得 文本 框 中 的 两 个 数 ， 开 始 搜索 ， 
然后 把 找到 的 了 系 数 添 加 到 页 面 中 。 查 找 双 数 的 任务 是 由 男 一 个 函数 完成 的 ， 该 函数 名 叫 
findPrimes()， 而 且 保 存在 男 一 个 JavaScript 文 件 中 。 














提示 ”要 理解 这 个 例子 或 者 Web Worker 的 作用 , 不必 去 看 findPrimes() 函 数 ， 只 要 知道 这 是 个 费 
时 间 的 任务 就 行 了 。 不 过 ， 假 如 你 对 这 里 的 数学 运算 感 兴趣 ， 或 者 想 自己 写 一 个 搜索 素 
数 的 脚本 ， 也 可 以 在 本 书 站 点 上 找到 该 函数 的 完整 代码 : www.prosetech.com/html5。 


下 面 是 doSearch() 函 数 的 完整 代码 : 


function doSearch() { 
// 取 得 指定 搜索 区 间 的 两 个 数 
var fromNumber = document.getElementById("from").value; 
var toNumber = document.getElementById("to").value; 


// 执 行 搜索 (这 一 步 花 时 间 ) 
var primes = findPrimes(fromNumber, toNumber); 


// 人 遍历 素数 数组 ， 把 它们 转换 成 一 个 长 字符 串 
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var primelist = ""; 

for (var i20; i«primes.length; i++) { 
primelist += primes[i]; 
if (i !- primes.length-1) primelist += ", "; 


j 


// 把 素数 字符 串 插入 页 面 中 
var displayList = document.getElementById("primeContainer"); 
displayList.innerHTML = primelist; 


// 更 新 状态 消息 ， 告 诉 用 户 当前 情况 
var statusDisplay = document.getElementById("status"); 
if (primelist.length -- 0) { 
statusDisplay.innerHTML = "Search failed to find any results."; 
} 
else 1 
statusDisplay.innerHTML - "The results are here!"; 
} 
} 


AA IE, 标记 和 代码 都 不 长 ,实际 上 可 以 说 是 和 价 明 扼 要 。 但 这 只 是 表面 上 能 看 到 的 ， 如 来 
搜索 的 区 间 很 大 , 那 搜索 过 程 会 得 变 慢 硅 硅 地 无 法 忍受 ,就 好 像 开 着 融 尔 夫 球 车 候 陡 坡 一 样 费 幼 。 














12.2.2 ”把 任务 放 在 后 台 


Web Worker 为 解决 这 个 问题 定义 了 一 个 新 对 象 ， 叫 Worker。 在 知 要 在 后 台 执 行 任务 时 ， 可 以 
创建 一 个 新 的 Worker， 交 给 它 一 些 代码 ， 然 后 发 送 给 它 一 些 数据 。 
面 这 行 代码 创建 了 一 个 新 的 Worker 对 象 ， 让 它 执行 PrimeWorker.js 中 的 代码 : 
var worker = new Worker("PrimeWorker.js"); 
M creer 的 代码 都 要 放 在 一 个 单独 的 文件 中 。 这 样 设计 是 为 了 避免 新 手 让 Worker 引 | 用 全 
变量 ， 或 者 直接 访问 页 面 中 的 元 素 。 这 两 个 操作 疾 是 不 允许 的 。 

















注意 ”浏览 器 会 严格 保持 网 页 与 Web Worker 代 码 分 离 。 因 此 ， 不 可 能 让 PrimeWorker.js 中 的 代码 
把 素数 直接 写 到 <div> 元 素 里 。Web a j 把 相应 数据 发 送 给 页 面 中 的 JavaScript 代 
码 ， 然 后 再 通过 它 把 结果 显示 出 来 。 


网 页 与 Web Worker 之 间 通 过 消息 来 沟通 。 给 Worker 发 送 消 息 要 使 用 该 对 象 的 postMessage() 
方法 : 

worker.postMessage(myData); 

然后 ，Worker 就 会 通过 onMessage 事 件 接收 到 该 数据 的 一 个 副本 。 此 时 ， 它 就 开始 工作 。 

类 似 地 ， 如 果 Worker 需 要 跟 网 页 对 话 , 它 可 以 调用 目 己 的 postMessage() 方 法 , 并 带 上 一 些 数 
据 。 而 网 页 同样 是 在 一 个 onMessage 事 件 中 接收 这 些 数 据 。 图 12-5 展 示 了 上 述 通 信 过 程 。 
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ET E a e d s) 12-5 RLEBU EA 
- 的 Web Worker T TET , 分 

三 个 步骤 页 面向 Worker 

发 送 一 些 数据 , Worker 开 始 


ee 运行 , 然后 Worker 再 向 页 面 
常规 代码 调用 postMessage() onMessage 事 件 - 


(例如 ) 响应 单 在 这 里 执行 费时 的 任务 发 回 一 些 数据 


击 按钮 的 操作 


onMessage 事 件 调用 postMessage 
在 这 里 更 新 页 面 





我 们 先 说 一 个 要 注意 的 地 方 。 调 用 postMessage() 方 法 时 ， 只 能 给 它 传人 一 个 值 。 这 对 于 传 
递 搜 索 系 数 的 区 间 来 说 是 一 个 问题 , 因为 区 间 由 两 个 值 确定 。 我 们 的 方 条 是 把 这 两 个 值 放 到 一 个 
对 和 象 字 面 量 中 (参见 12.1.4 节 的 附注 栏 )。 下面 的 代码 是 一 个 例子 , 这 里 的 对 象 字 面 量 包含 两 个 属 
性 (第 一 个 是 from， 第 二 个 是 to )， 每 个 属性 都 有 一 个 但 : 


worker.postMessage( 
{ from: 1, 
to: 20000 | 
); 








注意 ”请 注意 , 你 可 以 给 Worker 传 入 任何 对 象 字 面 量 。 到 了 后 台 ，, 浏览 器 会 使 用 JSON ( 参见 9.2.4 
YO 将 传 入 的 对 象 转换 为 无 害 字符 事 ， 复 制 它 ， 然 后 再 重新 将 其 转换 成 对 象 。 


了 解 了 这 些 细节 后 ， 就 可 以 对 前 面 看 到 的 doSearch() 函 数 进 行 一 番 改 进 了 。 这 里 ,不 再 让 它 
自己 搜索 素数 ， 而 让 它 创 建 一 个 Worker 来 承担 相应 的 任务 : 


var worker; 


function doSearch() { 
// 禁 用 按钮 ， 防止 用 户 同时 输入 多 个 搜索 区 间 


searchButton.disabled - true; 


// 创 建新 的 Worker 
worker = new Worker("PrimeWorker.js"); 


//48 X onMessage ¥ 4} | 
// 以 便 从 WorkeTr 那 里 收 到 消息 
worker.onmessage = receivedWorkerMessage; 


// 取 得 数值 范围 ， 发 送 给 Neb Worker 


var fromNumber = document.getElementById("from").value; 
var toNumber = document.getElementById("to").value; 
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worker.postMessage( 
( from: fromNumber, 
to: toNumber } 
); 


// 告 诉 用 户 正 在 搜索 
statusDisplay.innerHTML = "A web worker is on the job ("+ 


fromNumber + " to " + toNumber + ") ..."; 
j 


现在 ，PrimeWorkerjs 开 始 工作 了 。 它 接收 到 onMessage 事 件 ， 执 行 搜索 ， 然 后 给 网 页 发 送 回 
一 条 新 消息 ， 包 含 找到 的 素数 : 


onmessage = function(event) { 
// 网 页 发 过 来 的 对 象 保 存在 event .data 属 性 中 
var fromNumber = event.data.from; 
var toNumber = event.data.to; 


// 在 该 数值 范围 内 搜索 素数 


var primes = findPrimes(fromNumber, toNumber); 


// 搜 索 完 成 ， 把 结果 发 回 网 页 
postMessage(primes); 


局 


function findPrimes(fromNumber, toNumber) { 
// ( 帝 事 的 素数 判断 过 程 都 在 这 个 函数 里 ) 





在 Worker 调 用 postMessage() 的 时 候 ， 就 会 触发 onMessage 事 件 ， 进 而 会 调用 网 页 中 的 
receivedWorkerMessage()rPKZ : 


function receivedWorkerMessage(event) { 


// 取 得 素数 列表 
var primes = event.data; 


// 把 素数 显示 出 来 


// 启 动 搜索 功能 
searchButton.disabled = false; 
} 
这 里 省 略 的 代码 与 在 上 一 慷 看 到 的 一 样 ,就 是 把 系数 的 数组 转换 为 文本 , 然后 把 文本 插入 到 
网 页 中 。 
总 的 来 说 ,代码 的 结构 是 变 了 ,但 逻辑 相差 无 几 。 可 是 ,结果 呢 ? 完 全 不 一 样 。 现 在 ,即便 
搜索 大 量 的 系数 ， 页 面 也 能 保持 啊 应 。 可 以 深 动 页 面 、 在 文本 框 里 输入 、 选 择 之 前 搜索 的 结 
要 不 是 页 面 底部 的 消息 ， 悉 民 没 人 会 知道 是 后 人 台 使 用 了 Web Worker. 
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提示 ”你 的 Web Worker 需 要 使 用 另 一 个 JavaScript 文 件 中 的 代码 吗 ? T As f importScripts() = 
žo 假如 你 需要 在 PrimeWorker.js 中 调用 FindPrimes.js 文 件 中 的 函数 , 只 要 添加 下 面 这 行 代 
码 即 可 : 


importScripts("FindPrimes.js"); 


12.2.3 ”人 处理 Worker 错 误 


我 们 知道 ，postMessage() 方 法 是 跟 Web Worker 通 信 的 关键 。 不 过 ， 还 有 一 种 方式 可 以 给 网 
页 发 送 通知 一 一 用 onerror 事 件 告诉 网 页 有 错误 发 后: 

worker.onerror = workerError; 

KFE, 如 果 后 从 脚本 遇 到 了 问题 或 因为 数据 无 效 出 现 错 识 ，Worker 束 能 把 打包 的 错误 数据 发 
送 给 网 页 。 以 下 就 是 一 个 在 网 页 中 显示 错误 消息 的 示例 代码 : 


function workerError(error) { 
statusDisplay.innerHTML - error.message; 


} 
除了 message 属 性 外 ,错误 对 和 象 还 有 lineno 和 filename 属 性 , 分 别 你 存 看 错误 所 在 的 行 号 及 文 
件 的 名 字 。 





12.2.4 取消 后 台 任 务 


党 习 了 一 个 简单 的 Web Worker 的 用 例 之 后 ,下 面 该 考虑 如 何 改进 了 。 首 先 , 要 文 持 取消 后 台 
任务 ， 也 就 是 让 网 页 能 在 任务 执行 期 间 中 上 断 它 。 

停止 Worker 工 作 的 方式 有 两 种 ， 一 种 是 Worker 对 和 象 调 用 上 日 己 的 close() 方 法 ,但 更 常用 的 是 
创建 Worker 对 和 象 的 页 面 调用 该 对 象 的 terminate() 方 法 。 比 如 ,下面 的 代码 就 可 以 用 来 响应 取消 任 
务 的 按钮 单 击 操作 : 


function cancelSearch() { 
worker.terminate(); 
statusDisplay.innerHTML = ""; 
searchButton.disabled = false; 


j 











对 Web Worker 的 后 备 

此 时 此 刻 ， 有 读者 可 能 会 想 : 对 于 不 支持 Web Worker 的 浏览 器 ， 怎 么 办 ? 

与 Geolocation 一 样 , 也 可 以 考虑 用 Google Gears 来 作为 Web Worker 的 后 备 。Google Gears 
提供 了 一 种 叫做 Worder X% (http://code.google.com/apis/gears/api workerpool.html ) 的 特性 。 但 
是 ， 即 便 是 有 了 Gears 作 后 备 ， 也 还 要 考虑 用 户 未 安装 Gears 的 可 能 。 此 时 ,最 简单 的 方式 就 
是 在 前 台 完 成 相应 的 任务 : 
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if (window.Worker) { 
// X 4$ Web Worker 
// 那 就 创建 Worker 37 2- 
// 让 它 在 后 台 执 行 任务 
} else { 
// 不 支持 Web Worker 
// 那 你 只 能 调用 搜索 素数 的 函数 
llah hE 
} 


这 种 方式 不 强 连 你 多 写 任何 代码 ， 因 为 搜索 素数 的 函数 已 经 定义 好 了 ， 可 以 直接 调用 它 ， 
也 可 以 让 Web Worker 调用 它 。 可 是 ， 假 如 遇 到 一 个 长 时 间 的 任务 ， 这 样 做 就 会 锁 死 浏览 器 。 
而 要 解决 这 个 问题 ， 可 以 采用 另 一 种 (有 点 麻烦 的 ) 方式 ， 就 是 使 用 setIntervale() 或 
setTimeout() 来 模仿 后 台 进 程 。 比 如 ， 可 以 让 代码 每 次 迭代 搜索 一 些 素数 。 





单 击 这 个 按钮 就 可 以 停止 当前 的 搜索 任务 ， 重 新 局 用 搜索 按钮 。 别 迄 卫 ， 以 这 种 方式 俘 止 
Worker 之 后 ， 就 不 能 再 给 它 发 送 任何 消息 ， 也 不 能 让 它 执 行 任何 操作 了 。 要 执行 新 的 搜索 任务 ， 
必须 创建 一 个 新 的 Worker 对 象 。( 现在 的 例子 正 是 这 样 做 的 ， 所 以 重新 启动 操作 没有 问题 。) 


12.2.5 ” 传 违 复杂 消息 


关于 Web Worker， 最 后 我 们 还 想 介绍 一 项 技术 ， 那 就 是 进度 信息 。 图 12-6 展 示 了 一 个 改进 后 
的 示例 页 面 ， 其 中 显示 了 进度 信息 。 

要 显示 进度 ，Web Worker 必 须 在 工作 的 同时 把 进度 百分比 发 给 页 面 。 我 们 知道 ，Web Worker 
只 有 一 个 与 创建 它 的 页 面 对 话 的 方式 ， 即 使 用 postMessage() 方 法 。 因 此 ， 要 发 送 进度 百分比 ， 
就 要 发 送 两 种 消息 : 进度 通知 〈 在 工作 过 程 中 ) 和 系数 列表 (工作 结束 后 )。 这 项 技术 的 关键 在 
于 明确 区 分 两 类 消息 ， 因 此 页 面 中 的 onMessage 事 件 处 理 程 序 就 知道 哪个 是 进度 信息 ， 哪 个 是 结 
末了。 

为 此 , 需要 在 发 送 消息 对 象 字面 量 时 定义 不 同 的 属性 。 比 如 , 在 Web Worker 发 送 进度 信息 时 ， 
可 以 将 该 信息 命名 为 “Progress”， 而 在 发 送 素 数列 表 时 ， 将 其 命名 为 “PrimeList”。 

在 消息 对 象 字 面 量 里 定义 新 的 属性 ， 是 我 们 前 面 铝 Web Worker 发 送 区 间 数 值 时 用 过 的 技巧 。 
这 里 的 新 属性 messageType 和 data， 分 别 用 于 描述 消息 类 型 和 数据 本 号 。 

好 了 ， 我 们 可 以 重 写 Web Worker 的 代码 ， 为 系数 列表 添加 一 个 messageType 必 性 : 

onmessage = function(event) { 


// 搜 索 素数 


var primes = findPrimes(event.data.from, event.data.to); 























// 发 回 结果 
postMessage( 
(messageType: "Primelist", data: primes) 


3 


p 


12.2 WebWorkers | 317 





PX ER X 米 ‘~HE 
irefox 图 12-6: 在 搜索 素数 的 过 程 中 ， 
| L Prime Number Search | + E 会 不 断 更 新 状态 消息 告知 用 户 
| e | chHTMLS\Chapter 12\PrimeNumberSearch WebWorker.html ~ e, f E- 完成 了 百 分 之 多 少 。 当然 5 ix E 
要 是 用 一 个 实 色 进度 条 就 更 符 
Do a prime number search from 1 to 500000 . 合 预期 了 ( 参见 5.4.2 节 ) 


Start Searching | | Cancel 








MS 





1696 done ... 























A TEPES E, findPrimes() KA HL BR, 2:38] H]postMes sage () 9] P] v1 7 [n fri E o. 3X 
里 传递 的 对 象 字 面 量 同样 包含 两 个 属性 : messageType 和 data, 但 此 时 前 者 声明 的 是 进度 通知 , 后 
者 指定 的 是 进度 百分比 : 


function findPrimes(fromNumber, toNumber) { 








// 计 算 进 度 百分比 
var progress = Math.round(i/list.length*100); 


// 只 在 进度 变化 超过 1% 时 才 发 送 进度 百分比 信息 
if (progress !- previousProgress) { 
postMessage( 
(messageType: "Progress", data: progress) 


3 
previousProgress = progress; 


} 


n 


页 面 在 接收 到 这 个 消息 后 ， 首 先 要 检查 messageType 属 性 ， 以 便 知道 收 到 的 是 什么 数据 。 如 
末 是 系数 列表 ， 则 将 结果 显示 在 网 页 中 。 如 果 是 进度 通知 ， 则 更 新 进度 文本 : 
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function receivedWorkerMessage(event) 1 
var message - event.data; 


if (message.messageType -- "Primelist") { 
var primes - message.data; 


// 显 示 素 数列 表 ， 这 里 的 代码 与 前 面 例子 中 的 一 样 


} 
else if (message.messageType -- "Progress") { 
// 报 告 当 前 进度 
statusDisplay.innerHTML = message.data + "% done ...'; 
} 
} 


注意 ”可 以 采取 另 一 种 方式 来 设计 这 个 页 面 。 可 以 让 Web Worker 每 找到 一 个 素数 时 就 调用 一 次 
postMessage() 方 法 。 这 样 网 页 就 可 以 实时 地 把 找到 的 素数 显示 出 来 。 显 然 ， 此 时 的 优点 
是 可 以 同步 显示 结果 ， 但 缺点 则 是 不 停 地 阻 断 页 面 (因为 Web Worker 查 找 素 数 的 速度 很 
k) 到底 怎么 设计 才 好 呢 ? 这 取决 于 你 的 任务 ， 比 如 完成 任务 的 时 间 长 短 、 只 显示 部 分 
结果 有 没有 价值 、 得 到 每 部 分 结果 的 效率 如 何 ， 等 等 。 


利用 Web Worker 的 其 他 方式 
搜索 素数 的 例子 是 使 用 Web Worker 的 最 直观 方式 ， 即 执行 具有 了 明确 描述 的 任务 。 每 次 搜 
索 开 始 , 页 面 都 会 创建 一 个 新 的 Worker 对 象 ,每 个 Web Worker 对 象 独 立 负 责 一 项 任务 。 而 且 ， 
每 个 对 象 只 接收 一 个 消息 ， 然 后 发 回 一 个 消息 。 
悉 怕 实际 开发 中 的 页 面 不 会 这 么 简单 。 下 面 我 们 列 出 一 些 可 能 的 情况 , 让 你 能 够 进一步 扩 
展 这 里 的 例子 ， 进 而 满足 自己 的 实际 需要 。 

口 在 多 个 任务 中 重用 Web Woker, Worker 对 象 完 成 既定 任务 ， 触 发 onMessage 事件 处 理 
程序 后 并 不 会 被 销毁 。 它 只 会 闲置 在 那儿 ，, 等 待 新 的 任务 。 如 果 你 再 给 它 发 送 新 的 消息 ， 
I 

O 创建 多 个 Web Worker. 一 个 页 面 并 不 限于 只 能 创建 一 个 Worker 对 象 。 比 如 ， 若 要 支持 
访客 同时 搜索 多 个 区 间 内 的 素数 , 就 需要 为 每 个 搜索 单独 创建 一 个 Worker, 然后 通过 数 
组 来 跟踪 它们 。 这 样 ， 每 当 有 Worker 返回 结果 ， 就 可 以 把 结果 添加 到 页 面 中 ， 同 时 注 
意 不 覆盖 其 他 Worker 的 结果 。( 为 了 稳妥 起 见 , 还 是 建议 大 家 少 创建 Web Worker, 它们 
都 不 是 “省 油 的 灯 ”， 一 次 运行 太 多 会 拖 慢 计 算 机 。) 

a 在 一 个 Web Worker 中 创建 另 一 个 Web Worker。 每 个 Web Worker 都 可 以 创建 自己 的 
Web Worker， 向 它们 发 送 消息 ， 从 它们 那里 接收 消息 。 对 于 复杂 的 计算 任务 ， 比 如 计算 
斐 波 那 契 数 这 种 需要 递归 的 计算 ， 在 Worker 内 创建 Worker 可 以 派 上 用 场 。 

口 通过 Web Worker 下载 数 据 。Web Worker 可 以 使 用 XMLHttpRequest 对 象 (参见 11.1.1 


12.2 WebWorkers | 319 


TO) 取得 新 页 面 ， 或 者 向 Web 服务 发 送 请 求 。 取 得 了 所 需 的 信息 后 ， 它 们 可 以 调用 
postMessage() 方 法 ， 把 数据 发 回 页 面 。 

a 利用 Web Worker 执行 周期 性 任务 。 与 首 通 网 页 中 的 脚本 一 样 ，Web Worker 可 以 调用 
setTimeout()3, setInterval()Z4k, H2, v*[pyAidid Web Worker 来 定期 检测 某 个 网 站 
是 否 有 新 数据 。 


12.3 ”历史 管理 


HTML5S 添 加 了 会 话 历 史 管 理 功 能 , 作为 对 JavaScript 历 史 对 象 的 扩展 。 这 个 功能 听 起 来 简单 ， 
但 要 知道 什么 时 候 或 者 说 为 什么 该 用 这 个 功能 ， 却 是 一 个 技巧 。 

IFA, 你 从 前 一 直 都 没 听 说 过 JavaScript 中 的 历史 对 象 ? 不 要 紧 , 到 目前 为 止 , 这 个 对 象 的 功 
能 很 有 限 。 说 白 了 ， 以 前 的 历史 对 象 只 有 一 个 属性 和 三 个 简单 的 方法 。 这 个 属性 是 length， 表 示 
浏览 需 的 历史 列表 中 有 多 个 条 记录 , 这 些 记 录 是 你 在 上 网 期 间 访 问 过 的 页 面 的 列表 。 下 面 就 是 一 
个 使 用 历史 记录 的 小 例子 : 


alert("You have " + history.length + 
" pages in your browser's history list."); 


历史 对 象 中 被 用 得 最 多 的 方法 就 是 back()， 能 够 让 访客 在 浏览 带 的 历史 记录 中 后 退 一 步 : 

history.back(); 

执行 这 行 的 效 采 瓯 如 同 访客 单 击 了 浏览 可 的 “后 退 ” 按 钮 。 类 似 地 ， 调 用 forward() 方 法 可 
以 前 进一步 ， 或 者 幸 用 go() 方 法 并 指定 后 退 或 前 进 的 步 数 。 

除非 你 想 要 定制 后 退 和 前 进 按钮 ， 否 则 这 些 属性 和 方法 没有 多 大 用 处 。 但 是 ，HTML5 又 在 
此 基础 上 添加 了 一 些 功 能 ， 从 而 让 你 能 实现 原来 想 做 但 很 难 做 到 的 事情 。 新 功能 的 核心 是 
pushstate() 方 法 ， 通 过 它 可 以 改变 浏览 硕 地 址 栏 中 的 URL， 同 时 不 会 导致 页 面 刷 新 。 这 是 一 项 
非常 贴心 的 技术 , 特别 适合 动态 加 载 新 内 容 , 同时 无 阻 渍 地 更 新 页 面 的 应 用 。, 在 这 种 动态 页 面 中 ， 
URL 与 页 面 内 容 无 法 一 一 对 应 , 会 出 现 第 一 个 页 面 加 载 了 为 一 个 页 面 的 内 容 后 ， 其 URL 仍 然 保 留 
在 浏览 帮 地 址 栏 中 的 情况 。 而 此 时 浏览 带 的 收藏 夹 功能 难以 反映 实际 情况 。 会 话 历 史 管 理 功 能 ; 
我 们 提供 了 解决 这 个 问题 的 方案 。 

如 果 有 读者 对 上 面 描述 的 问题 不 太 理 解 , 请 稍 安 狼 躁 。 下 一 市 ,我们 将 举 一 个 能 够 利用 会 话 
历史 的 例子 。 
































12.3.4 URLE 


E-E, 我 们 介绍 了 一 个 有 关中 国旅 游 的 网 页 , 其 中 包含 一 套 内 建 的 幻灯 片 (参见 11.1.3 市 )。 
在 那个 页 面 上 ， 单 击 Previous 和 Next 按 钮 ， 可 以 加 载 不 同 的 照 刻 。 但 该 例子 最 大 的 腕 点 是 加 载 每 
张 照 片 时 ， 不 会 刷新 页 面 ， 不 会 打 汤 用 户 的 注意 力 ， 因 为 它 使 用 了 XMLHttpRequest 对 象 。 

但 是 , 类 似 这 样 的 动态 页 面 也 存在 一 个 广为人知 的 限制 。 即使 页 面 因 为 加 载 了 新 页 面 而 有 所 




















320 | 第 12 章 更 酷 的 JavaScript 技术 


变化 ， 但 浏览 器 地 址 栏 中 的 URL 却 保持 不 变 ( 图 12-7 )。 


不 同 的 内 容 ， 相 同 的 URL 图 12-7: 这 里 是 ChinaSites. 
html 页 面 的 两 个 版 本 , 分 
别 加 载 了 不 同 的 幻灯 
片 。 但 两 个 页 面 的 URL 
却 完 全 相同 (都 是 
ChinaSites.html ) 


The Exotic Side of China 


Rice Terrace 











为 了 理解 这 个 问题 ,可 以 设想 你 有 一 个 同事 小 乔 在 浏览 图 12-7 所 示 的 图 片 及 说 明 ， 他 看 到 了 
不 同 的 风景 , 但 真正 打动 他 的 则 是 第 五 张 幻灯 片 ， 那 张 幻灯 片 里 有 一 棵 许愿 树 。 小 庆 兴 奋 地 把 这 
张 约 灯 睛 加 入 了 书签 ， 然 后 用 电子 邮件 把 UREL 发 给 了 朋友 克莱尔 ， 又 在 Twitter 上 辐 目 己 的 粉丝 推 
存 这 张 照 片 (把 纸 典 抛 到 树 上 ， 强 过 加 时 水 扔 硬币 ， 看 这 里 http:/...”)。 然 而 ， 当 小 乔 再 次 打开 
书签 ,克莱尔 单 击 邮件 中 的 链接 ， 或 者 粉丝 们 在 Twitter 上 访问 小 乔 推荐 的 页 面 时 ， 他 们 看 到 的 都 
是 第 一 张 约 灯 片 。 这 时 候 ， 可 能 有 人 会 失去 春心 ， 等 不 及 翻 到 第 五 张 约 灯 片 就 离开 了 ， 而 有 人 甚 
至 会 党 得 撞 不 着 头脑 一 一 这 个 链接 发 错 了 吧 ? 如 果 页 面 中 的 约 灯 片 不 止 5 张 ， 问 题 还 会 更 麻烦 ; 
Flickr 的 一 余 照 族 可 能 多 达 数 十 张 甚至 数 百 张 。 

















12.3.2 ”以 往 的 解决 方案 : Hashbang URL 


为 解决 这 个 问题 ， 很 多 人 采用 一 种 向 网 页 URL 末 尾 添加 信息 的 方式 。 其 中 最 常见 的 (也 是 很 
有 争议 的 ) Zrikdéhashbangf€7k. Prihashbang, SLIETEURLZKEEJH E2!, £AJEEBERERTKRZETEHJfz 
Eo E PTT: 

http://jjtraveltales.com/ChinaSites.html&!/Slides 

JURO BS HG Js DUI, d OU TELE fei A 2A CURL BU FE Zw 98 27; X F EI JURLOE DE , 
浏览 希 会 认为 你 还 是 在 同一 个 ChinaSites.html 页 面 上 ， 只 不 过 末尾 加 了 一 些 附加 信息 。 

另 一 方面 ， 如 果 JavaScript 代 码 在 修改 URL 时 没有 使 用 #f 千 号， 结果 会 怎么 样 呢 : 

http://jjtraveltales.com/ChinaSites.html/Slide5 
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这 样 的 话 ， 浏 览 硕 会 马上 癌 Web 服 务 大 发送 请 求 ， 企 图 下 载 新 的 页 面 。 这 显然 不 对 。 

那 怎 么 实现 这 个 hashbang 技 术 呢 ? 首先， 要 在 页 面 每 次 加 载 新 约 灯 族 时 改变 URL。( 在 
JavaScript 代 人 码 中 修改 location.href 属 性 即 可 。) 其 次 ， 要 在 页 面 首次 加 载 时 检测 URL， 取 得 附加 
言 轧 ， 然 后 据 以 从 Web 服 务 硕 动态 地 获取 对 应 的 内 容 。 整 个 过 程 加 起 来 经 浓 会 搞 得 人 眼花 综 乱 ， 
好 在 有 现成 的 JavaScript 库 可 以 使 用 ， 比 如 PathJS ( https://github.com/mtrpcic/pathjs )。 有 了 这 些 库 ， 
实现 hashbang 技 术 就 简单 多 了 。 

虽然 hashbang 技 术 应 用 广泛 ， 但 同样 也 饱 受 争议 。 反 对 这 种 做 法 的 Web 开 发 人 员 提 出 了 如 下 
EH. 

O URL 复 杂 化 。Facebook 就 是 这 个 问题 的 典型 。 过 去 , 不 用 浏览 太 多 页 面 ，URL 很 快 就 会 被 
额外 信息 填 满 , 变 成 类 似 这 样 http:/www.facebook.comy/profile.php?id= 1586010043#!/pages/ 
Haskell/401573824771。 目 前 ， 只 要 浏览 紫 支 持 ， 开 发 人 员 就 可 以 使 用 会 话 历 史 功 能 

口 没有 灵活 性 。Hashbang 页 面 在 URL 中 保存 了 很 多 信息 ， 一旦 页 面 的 工作 方式 或 者 存储 信 
居 的 方式 改变 ， 那么 原来 的 URL 就 完全 不 能 用 了 ， 这 是 很 多 网 站 无 法 访问 的 主要 原因 。 

口 搜索 引擎 优化 。 搜 索引 擎 会 将 不 同 的 hashbang URL 看 做 一 个 页 面 。 对 于 ChinaSites.html 来 
说 ， 这 意味 看 搜索 引擎 不 可 能 索引 每 一 个 景点 ， 而 是 很 可 能 会 忽略 附加 信息 。 如 东 有 人 
搜索 “china wishing tree”， 很 可 能 不 会 在 结果 中 看 到 ChinaSites.html。Google 为 解决 这 个 
问题 设计 了 一 种 专用 hashbang 寺 法 ( https://developers.google.com/webmasters/ajax-crawling/ 
docs/getting-started ), 但 这 个 方案 遭 到 了 Web 开 发 人 员 众 口 一 词 的 批评 , 认为 它 不 好 理解 。 

O Cool URL 问 题 。Cool URL 就 是 那些 人 简短、 明确 一 一 更 重要 的 是 一 一 永远 不 会 变 的 URL。 
Web 之 父 蒂 姆 . 伯 纳 斯 . 李 在 一 个 页 面 中 (http:/www.w3.org/Provider/Style/URI.html ) 解 
释 了 什么 是 Cool URL 不管 你 多 么 希望 自己 的 内 容 在 网 上 永存 , 都 改变 不 了 hashbang URL 
难 维护 的 事实 ， 因 此 不 可 能 成 为 Web 发 展 的 选择 。 

目前 ， 束 使 用 hashbang 技 术 时 该 如 何 变通 这 个 问题 ， 虽 然 很 多 开发 人 员 都 有 不 同 的 想法 ,但 
大 多 数 人 都 认同 在 未 来 的 Web 开 发 中 ，HTML5 会 话 历史 功能 是 最 终 的 选择 。 
































12.3.3 ” HTMLS5 的 方案 : 会 话 历史 


HTML5 的 会 话 历 史 功 能 为 以 上 URL 问 题 提供 了 不 同 的 方案 。 会 话 历 史 功 能 允许 开发 人 员 把 
URIL 改 成 任何 形式 ， 而 不 必 非 要 使 用 请 称 的 # 导 和 ! 号 。 比 如 ， 对 于 ChinaSites.html 页 面 中 的 第 五 
张 约 灯 户 ， 可 以 把 URL 修 改 成 这 样 : 

http://jjtraveltales.com/ChinaSites4.html 

在 这 种 情况 下 ,浏览 妖 并 不 会 真 的 请 求 名 为 ChinaSites4.html 的 页 面 ， 而 是 还 在 当前 页 面 , 但 
加 载 新 的 幻灯 厂 ， 这 正 是 我 们 想 要 的 结果 。 假 如 访客 在 历史 记录 中 回 退 ， 那 么 结果 也 是 一 样 的 。 
比如 ， 访客 前 进 到 下 一 张 幻 灯 片 ( URL 变 为 ChinaSites5.html )， 然 后 单 击 后 退 按 钮 (返回 
ChinaSites4.html )， 浏 览 器 仍然 会 保持 在 当前 页 面 ， 但 会 触发 一 个 事件 ， 以 便 我 们 加 载 匹 配 的 幻 
灯 片 ， 并 恢复 到 页 面 的 正确 版 本 。 
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听 起 来 不 错 啊 。 可 是 ， 这 个 方案 也 存在 一 个 大 问题 。 如 果 你 想 让 会 话 历史 如 期 工作 ， 那么 就 
必须 为 每 个 URL 都 创建 一 个 对 应 的 页 面 。 对 这 个 例子 来 说 ， 你 必须 创建 ChinaSites1.html、China- 
Sites2.html、ChinaSites3.htm1， 等 等 。 这 是 因为 访客 可 能 会 直接 访问 这 些 页 面 ， 可 能 是 过 几 天 又 
要 通过 书签 打开 其 中 一 个 页 面 ,手工 输入 页 面 的 URL , 或 者 是 单 击 邮件 中 的 链接 打开 其 中 的 页 面 。 
大 型 互联 网 公司 ( 如 Facebook 或 Flickr ) 倒是 无 所 请 ， 因 为 他 们 可 以 利用 少量 服务 疾病 代码 在 不 
同情 况 下 提供 相同 的 幻灯 片 。 但 对 于 小 公司 或 Web 开 发 人 员 个 人 来 说 , 这 就 意味 着 很 大 的 工作 量 。 
有 关 解 决 这 个 问题 的 方法 ， 请 参见 本 章 末 尾 的 附注 栏 。 

理解 了 会 话 历 史 功 能 的 工作 原理 后 ( 这 是 最 难 的 部 分 )， 实 际 使 用 它 就 容易 多 了 。 事 实 上 ， 
会 话 历史 功能 只 涉及 两 个 方法 和 一 个 事件 ， 都 属于 history 对 象 。 

最 重要 的 方法 是 pushSstate() ， 利 用 它 可 以 修改 网 页 的 URL 部 分 。 为 了 安全 起 见 ， 不 能 修改 
URL 的 其 他 部 分 。( 如 有 果 允 许 修改 URL 的 其 他 部 分 ， 那么 硅 客 们 就 可 以 轻 而 多 举 地 伪 波 别人 的 网 
站 ， 比 如 让 人 在 银行 交易 表单 中 用 Gmail 登录 。) 

以 下 就 是 把 URL 的 网 页 部 分 修改 为 ChinaSites4.html 的 代码 : 

history.pushState(null, null, "ChinaSites4.html"); 

xx Hi pushState()7r ik Bel — P XX, S8 — PIRE. "TIEREN Và as REP TP REA. 

第 一 个 参数 可 以 是 任何 数据 ， 只 要 你 认为 它 适合 表示 页 面 的 当前 状态 。 利 用 这 个 参数 ， 可 以 
让 用 户 通 过 浏览 需 历 史记 录 恢 复 到 不 同 的 页 面 状 态 。 第 二 个 参数 是 页 面 标题 ， 显 示 在 浏览 锅 标 题 
栏 。 所 有 浏览 右 目 前 都 忽略 这 个 参数 。 如 果 你 不 想 设 置 状 态 ， 也 不 想 设 置 标题 ,那么 只 要 像 上 面 
代码 所 示 ， 在 这 两 个 参数 位 置 上 提供 null 值 即 可 。 

下 面 ， 我 们 就 米 看 看 修改 ChinaSites.html 页 面 以 匹配 当前 显示 状态 的 代码 。 这 里 使 用 幻灯 片 
的 编号 表示 页 面 状 态 。 这 个 细节 很 重要 ， 稍 后 在 处 理 onPopstate 事 件 时 你 就 会 明日 : 


function nextSlide() { 
if (slideNumber == 5) { 
slideNumber = 1; 
} else 1 
slideNumber += 1; 


j 
































history.pushState(slideNumber, null, "ChinaSites" + slideNumber + ".html"); 
goToNewSlide(); 
return false; 


j 


function previousSlide() { 
if (slideNumber -- 1) ( 
slideNumber - 5; 
} else 1 
slideNumber -- 1; 
} 
history.pushState(slideNumber, null, "ChinaSites" + slideNumber + ".html"); 
goToNewSlide(); 
return false; 
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图 12-8 显 示 了 使 用 会 话 历史 功能 后 的 页 面 。 


12-8. 访客 单 击 浏览 
幻灯 片 时 ，URL 会 随 之 


变化 ， 与 之 匹配 。 这 时 
China's chief tourist attractions are well known. Less familiar are the sites discussed = EAA 
here, which range from quirky to beautiful to downright discomfiting. If you're 的 URLS Br , XF A 


looking to explore something a little less usual, come follow us off the beaten track. BM, SE. p34 4= 
直觉 ， 因 为 它 对 应 着 每 


一 张 幻灯 捕 





/ [3 China Sites D 


€ QC © ocalhost/China 











Wishing Tree 


Make a wish and toss a red ribbon up into the branches of this tree. If 





在 使 用 pushstate() 方 法 的 同时 ， 还 应 该 考虑 onPopSstate 事 件 ， 它 们 可 以 说 是 “天 生 一 对 ”。 
这 人 么 说 是 因为 pushState() 方 法 会 回 浏 览 帮 的 历史 记录 中 存 人 一 个 新 状态 , 而 onPopState 事 件 则 意 
味 者 用 户 返 回 了 某 个 状态 ， 这 也 就 为 处 理 状态 变化 提供 了 机 会 。 

说 了 半天 ,我 们 还 是 举 个 例子 。 假 设 访客 会 看 完 所 有 幻灯 片 ， 随 痢 他 的 点 击 ， 地 址 栏 的 URL 
7x M ChinaSites.htmlZE JV, ChinaSitesl.html, ChinaSites2.html, ChinaSites3.html::::-- 即使 页 面 并 没 
有 和 真 的 改变 ,但 这 些 URL 也 会 保存 到 浏览 妖 的 历史 记录 中 。 如 果 用 户 返 回 上 一 张 幻灯 片 ( 比如 ， 
从 ChinaSites3.html 返 回 ChinaSites2.html ), 就 会 触发 onPopState 事 件 。 而 这 个 事件 的 事件 对 象 中 包 
含 着 原来 通过 pushstate() 方 法 保存 的 状态 信息 。 你 的 工作 就 是 根据 这 些 信息 ， 恢 复 到 网 页 的 适 
当 版 本 。 对 于 有 眼下 的 例子 来 说 ， 也 就 是 加 载 正 确 的 约 灯 请 : 


window.onpopstate = function(e) { 
if (e.state !- null) { 
// 这 个 状态 的 幻灯 片 编 号 是 多 少 ? 
// (当然 也 可 以 从 UREL 中 取得 这 个 编号 值 
// 但 使 用 location.hzef 属 性 会 比较 麻烦 ) 
slideNumber = e.state; 


// 从 Web 服 务 器 请 求 相应 的 幻灯 片 
goToNewSlide(); 
t 
以 上 代码 前 先 检测 是 否 存 在 state 对 象 ， 如 果 存 在 再 继续 下 面 的 工作 。 之 所 以 这 样 做 ， 是 因 
为 有 些 浏 览 磊 (包括 Chrome ) 会 在 初次 加 载 页 面 时 就 触发 onPopstate 事 件 ， 即 便当 时 并 未 调用 
pushState()77 iE. 





注意 history 对 象 中 还 有 一 个 方法 ， 但 用 得 不 多 ， 那 就 是 YeplaceState() 。 可 以 使 用 
replaceState() 修 改 与 当前 页 面相 关 的 状态 信息 ， 且 不 会 向 历史 记录 添加 任何 记录 。 
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12.3.4 浏览 器 对 会 话 历 史 的 支持 情况 


会 话 历 史 还 是 一 个 比较 新 的 功能 , 但 除了 Internet Explorer ^h, PMA 5 ENI o; HJ Eco JUAN 
都 已 经 文 持 它 了 《人 参见 表 12-3 )。 


表 12-3 ”浏览 器 对 会 话 历 史 的 支持 情况 
IE Firefox Chrome Safari Opera Safari iOS Android 
最 低 版 本 一 4 8 $ 11.5 4.2 一 


对 于 不 文 持 会 话 历史 的 训 览 项， 有 不 同 的 处 理 方式 。 如 采 你 置之不理 , 那 就 不 会 出 现 那 些 符 
合 且 党 的 URL。 如 采用 下 查看 前 面 的 例子 ,结果 就 是 这 样 。 无 论 你 加 载 的 是 哪个 幻灯 厂 ，URL 妈 
终 都 是 ChinaSites.html。Flickr 在 显示 上 自己 的 照片 时 也 采用 类 似 手段 ( 请 用 下 查看 这 个 链接 : 
http://tinyurl.com/6hnvanw )。 

另外 , n] UEN Vs AS SCREENED. T ET AS DIEA VIE S UR pe D E42 VAI 
的 、 有 意义 的 URL 比 动态 加 载 内 容 还 重要 ， 这 样 就 做 是 合情合理 的 。 比 如 ， 代 码 托 管 网 站 
http:/github.com 就 采用 了 这 种 处 理 方式 ， 以 便 UREL 与 项 目 目录 一 一 对 应 。 但 是 , 在 支持 会 话 历史 
Hx] Vas, 不 仅 可 以 看 到 动态 加 载 的 内 容 ， 而 且 还 能 看 到 优雅 的 请 入 效 末 ,， 上 有 具体 说 明 请 参见 这 
TH. http://github.com/blog/760-the-tree-slider。 

最 复杂 的 情况 是 尽 可 能 使 用 会 话 历 史 , 同 时 以 hashbang 语 法 作为 后 备 。( Facebook 采 用 的 就 是 
这 种 方法 。) 这 种 方法 的 缺点 是 对 一 个 页 面 要 采用 两 种 不 同 的 处 理 方 式 。 不 过 ， 倒 是 可 以 采用 一 
些 JavaScript 库 来 简化 任务 ， 缩 小 差异 ， 比 如 http:/github.com/balupton/history.js。 


























为 达到 URL 的 要 求 而 创建 额外 的 页 面 

会 话 历史 遵循 最 初 的 Web 哲 学 : 每 一 段 内 容 都 由 一 个 唯一 且 持 久 的 URL 标 识 。 这 就 意味 着 
每 个 URL 都 必须 让 访客 找到 他 原来 看 到 过 的 内 容 ， 不 容易 啊 。 比 如 ， 要 是 有 人 请 求 了 
ChinaSites3.html， 你 就 得 从 ChinaSites.html 中 取得 公共 内 容 ， 然 后 再 从 ChinaSites3 slide.html 中 
取得 幻灯 片 的 内 容 ， 把 它们 显示 到 一 块 。 

如 果 你 是 经 验 丰 富 的 程序 员 ， 那 可 以 编写 一 段 服务 器 端 代码 ,解释 Web 请 求 ， 动态 完成 这 
一 组 合 过 程 。 但 如 果 你 没有 那么 多 经 验 ， 则 要 选择 其 他 手段 。 

最 简单 的 办 法 就 是 给 每 个 URL 创 建 一 个 网 页 文件 。 换 名 话说 , 必须 逐个 创建 ChinaSitesl.html、 
ChinaSites2.html、ChinaSites3.html， 等 等 。 当 然 , 没有 必要 把 同一 个 幻灯 片 的 内 容 放 在 两 个 文件 
里 (比如 在 ChinaSites3.html 和 ChinaSites3 slide.html 中 保存 相同 的 幻灯 片 )， 因 为 这 些 样 维护 起 
米 太 麻烦 。 好 在 有 两 个 简单 的 办 法 可 以 帮 上 忙 。 

口 服务 器 端 包 含 。 如 果 你 的 Web 服 务 器 支持 服务 器 端 包含 技术 (大 多 数 都 支持 )， 可 以 使 
用 以 下 指令 : 
<l--#include file-"footer.html" --> 
虽然 这 看 起 来 像 条 注释 ,但 这 个 指令 是 在 告诉 Web 服 务 器 打开 指定 的 文件 ， 并 把 其 内 容 
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插入 它 所 在 的 位 置 。 这 样 ， 就 可 以 把 公共 内 容 和 幻灯 片 组 合 在 一 个 特定 的 页 面 中 。 
事实 上 ， 对 应 于 每 张 幻灯 片 的 文件 ( ChinaSites1.html、ChinaSites2.html 等 ) 都 仅 需 几 
行 这 样 的 标记 ， 就 可 以 创建 出 一 个 页 面容 器 来 。 

Q 使 用 网 页 设计 工具 中 的 模板 。Adobe Dreamweaver 和 Microsoft Expression Web 都 支持 Web 
模板 功能 ,基于 模板 和 特定 的 信息 ， 可 以 创建 任意 多 个 页 面 。 只 要 创建 出 包含 公共 内 容 
和 样式 的 模板 ， 就 可 以 通过 重用 它 来 迅速 简单 地 创建 出 针对 所 有 幻灯 片 的 页 面 。 
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Ex AFKE, ACSS OLME KEAR” ) 标准 ， 束 没有 现代 的 Web 设 计 。 即 便 

= 毛 , 是 格式 极为 丰富 、 构 图 极为 复杂 的 网 页 ， 也 可 以 通过 CSS 把 格式 化 工作 转移 到 一 个 外 
部 文件 一 一 样式 和 表 里 。 这 样 一 来 ， 网 页 标记 就 可 以 非常 清 磷 、 清 晰 、 易 该。 

要 想 最 大 限度 地 发 挥 HTML5 (以 及 本 书 ) 的 功用 ， 必 须 得 熟悉 CSS 标 准 。 如 琳 你 本 来 就 是 
CSS 专 家 ， 这 个 附录 可 以 不 看 ， 只 关注 本 书 其 他 内 容 即 可 ; 为 外 要 特别 注意 第 8 革 ， 其 中 介绍 了 
CSS3 新 增 的 功能 。 但 如 采 你 的 CSS 扩 术 没 有 那么 好 , 那 本 附录 可 以 玫 你 补充 一 些 基 础 知识 ， 以 便 
理解 本 书 其 他 内 容 。 

















注意 本 附录 只 是 概要 地 介绍 了 CSS， 并 没有 面面俱到 。 如 果 看 完 本 附录 ， 你 还 觉得 有 些 问 题 
没 搞 明 白 ， 建 议 找 一 本 专门 讲 CSS 的 书 ， 比 如 CSS: The Missing Manual. 


A.1 在 网 页 中 添加 样式 


有 三 种 在 网 页 中 使 用 样式 的 方式 。 

第 一 种 是 下 接 把 样式 信息 散 入 到 元 素 里 ， 这 就 要 用 到 style 属 性 。 下 面 这 个 例子 展示 了 如 何 
修改 标题 文本 的 颜色 : 

<h1 style="color: green">Inline Styles are Sloppy Styles«/h1» 

这 种 方法 非常 方便 ， 但 会 令 标记 杂乱 无 章 。 

第 二 种 是 把 全 部 样式 通信 到 <style> 元 又 里 ， 而 这 个 <style> 元 又 要 放 在 页 面 的 <head> 部 分 : 


«head» 
«title»Embedded Style Sheet Test«/title» 
«style» 





styles 
</head> 
这 样 写 代码 能 够 把 样式 与 标记 分 开 , 但 最 终 它们 还 是 在 一 个 文件 里 。 这 种 方式 适合 一 次 性 的 
样式 (也 就 是 不 想 在 其 他 页 面 中 重用 的 样式 )， 也 适合 简单 的 测试 和 示例 ， 就 像 本 书 中 的 示例 页 


328 | 附录 A CSS 简明 教程 





面 一 样 。 但 是 , 对 于 真正 的 专业 站 点 而 言 , 这 种 做 法 不 值得 提倡 , P7 Xi tit PSU AE SUBEST: 
第 三 种 方式 是 使 用 <link> 元 素 在 chead> 部 分 链接 外 部 样式 表 文 件 。 下 面 这 个 例子 告诉 浏览 右 
应 用 名 为 SampleStyles.css 的 外 部 样式 表 中 的 样式 : 


<head> 

«title»External Style Sheet Test«/title» 

«link rel="stylesheet" href-"SampleStyles.css"» 
«/head» 


这 种 方式 最 党 用， 将 末了 也 最 好 。 而 且 ， 通 过 这 种 方式 还 能 在 其 他 页 面 间 重 用 样式 。 如 于 你 
愿意 ， 还 可 以 把 样式 分 割 到 多 个 样式 表 ， 人 然后 在 任意 HIML 页 面 中 链接 任意 多 个 你 需要 的 那些 

















注意 ”现代 Web 开 发 建立 在 一 个 简单 的 原理 基础 上 。HTML 标 记 用 于 把 页 面 结 构 化 为 逻辑 区 块 
( 比如 段落 、 标 题 、 列 表 、 图 片 和 链接 )， 而 CSS 样 式 表 用 于 格式 化 (通过 指定 字体 、 颜 
色 、 边 框 、 背 景 和 布局 )。 遵 守 这 个 规则 ， 网 页 就 容易 编辑 。 如 果 要 修改 整个 网 页 的 格式 
和 布局 ， 只 要 修改 它 所 链接 的 样式 表 即 可 。( 要 了 解 样式 表 真 正 的 魔力 ， 建 议 看 看 “CSS 
禅 意 花园 ”， 地 址 为 www.csszengarden.com; 其 中 ， 相 同 的 网 站 通过 不 同 的 样式 表 ， 呈 现 
出 了 200 多 种 不 同 的 面貌 。) 


A.2 样式 表 解 析 


一 个 样式 表 就 是 一 个 文本 文件 ， 在 Web 服 务 磅 上 通常 与 HTML 页 面 放 在 一 起 。 样 式 表 中 包含 
厂 十 样式 规则 ， 规 则 的 先后 顺序 不 重要 。 

每 条 样式 规则 会 为 一 或 多 个 HTML 元 素 指 定 一 或 多 个 格式 化 信息 。 下 面 是 简单 的 样式 规则 的 
结构 : 


selector { 
property: value; 
property: value; 











以 下 是 样式 规则 各 个 部 分 的 说 明 。 

O selector (WI ) 表示 要 格式 化 什么 内 容 。 浏 览 强 会 在 整个 页 面 中 查找 选择 符 想 要 匹 
配 的 元 于 。 编 写 选择 符 的 方式 也 不 止 一 种 ,但 最 简单 的 就 是 耳 接 给 出 你 想 要 为 其 应 用 样 
式 的 元 素 名 (如 下 所 示 ) 例如 ， 可 以 编写 一 个 选择 符 ， 选 出 页 面 中 的 所 有 一 级 标题 。 

O property (JRE): 表示 要 应 用 什么 样式 。 属 性 就 是 颜色 、 字 体 、 对 齐 方式 ， 等 等 ,一 条 
样式 规则 里 可 以 设置 任意 多 个 属性 一 一 这 个 例子 里 是 两 个 属性 。 

O value (E): 表示 给 样式 设置 什么 样 的 值 。 例 如 ， 如 果 属 性 是 颜色 ,那么 值 可 以 是 浅 赣 色 
或 淡 绿 色 。 

好 了 ， 下 面 看 一 个 真正 的 样式 规则 : 
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hi 1 
text-align: center; 
colort green; 


} 

把 这 条 规则 复制 粘贴 到 样式 表 里 〈 比 如 ， 保 存在 SampleStyles.css 中 )， 然 后 找 一 个 简单 的 网 
页 ( 至少 要 包含 一 个 <h1> 元 素 )， 添 加 一 个 <Link> 元 素 引 用 该 样式 表 。 最 后 ， 在 浏览 器 中 打开 这 
个 网 页 ， 你 就 会 发 现 <h1> 元 素 不 再 是 其 默认 的 格式 ， 而 是 会 变 成 绿色 并 居中 。 

















A.2.1 CSS 属 性 


前 面 的 例子 介绍 了 两 个 格式 化 属性 : text-align (设置 文本 在 水 平方 向 上 如 何 对 齐 ) 和 color 
(设置 文本 的 颜色 )。 

除 此 之 外 ， 还 有 很 多 很 多 可 以 使 用 的 格式 化 属性 。 表 A-1 列 出 了 其 中 一 些 最 第 用 的 。 事 实 
上 ， 这 个 表 中 列 出 了 本 书 示例 中 出 现 过 的 几乎 所 有 样式 属性 (不 包括 第 8 草 中 介绍 的 新 的 CSS3 
属性 )。 


RA-1 按 类 查看 的 常用 样式 属性 
E 性 
3: color 
Be background-color 
margin 
padding 
margin-left, margin-right, margin-top, margin-bottom 
padding-left, padding-right, padding-top, padding-bottom 
border-width 
border-style 
border-color 
border (一 次 性 设置 宽度 、 样 式 和 颜色 ) 
text-align 
text-indent 
i word-spacin 
RAT e 
line-height 
white-space 
font-family 
font-size 
font-weight 
字体 font-style 
font-variant 
text-decoration 
Ofont-face (关于 使 用 自 定义 字体 ， 请 参考 8.2 市 ) 
width 
height 





尺寸 
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lm 性 
position 
布局 left, right 
float, clear 
background-image 
图 片 background-repeat 
background-position 


提示 “如 果 你 手边 没有 其 他 样式 表 参 考 书 ， 可 以 访问 http:/www.htmldog.comy/reference/cssproper- 
ties， 里 面 有 表 里 列 出 的 (以 及 更 多 的 ) 属性 。 你 可 以 找到 每 个 属性 的 信息 ， 包 括 简介 和 
允许 哪些 值 。 


A.2.2 ”使 用 类 格式 化 正确 的 元 素 


前 面 的 样式 规则 格式 化 的 是 所 有 文档 中 的 ch1> 标 题 。 但 在 比较 复杂 的 文档 中 ， 则 需要 指定 具 
体 的 元 素 ， 为 它们 应 用 不 同 的 样式 。 

为 此 ， 需 要 使 用 class 属 性 为 这 些 元 素 起 个 名 字 。 下 面 是 一 个 例子 : 

«hi class="ArticleTitle">HTML5 is Winning«/hi1» 

好 了 ,现在 可 以 只 为 这 个 标题 写 一 条 样式 规则 了 。 关 键 在 于 选择 符 要 以 一 个 句点 开头 ， 然 后 
JERK, RAF: 

.ArticleTitle { 

font-family: Garamond, serif; 


font-size: 40px; 


} 

这 样 ， 表 示 文 章 标题 的 <h1> 元 素 就 放大 到 了 40 像 素 高 。 

可 以 给 任意 多 个 元 系 指 定 相同 的 类 属性 。 事 实 上 ， 这 正 是 发 明 类 属性 的 用 意 所 在 。 几 乎 所 
有 样式 表 里 都 可 以 看 到 类 选择 符 规 则 ， 这 些 类 选择 符 把 网 页 标记 有 效 地 分 成 了 可 以 承载 样式 的 
单位 。 

最 后 ， 有 必要 提 一 下 : 可 以 组 合 使 用 元 系 类 型 和 类 名 。 比 如 : 


h1.ArticleTitle { 
font-size: 40px; 


} 

这 个 选择 符 只 适用 于 类 为 ArticleTitle 的 <h1> 元 素 。 有 时 候 ， 这 样 写 只 是 为 了 清晰 而 已 一 一 
比如 ， 你 想 提 醒 自 己 只 为 <h1> 元 素 添 加 ArticleTitle 类 ， 而 其 他 元 素 都 不 会 有 这 个 类 。 但 大 多 数 
情况 下 ，Web 设 计 人 员 只 会 给 出 一 个 类 名 ， 不 会 限定 任何 元 素 。 
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注意 不 同 的 选择 符 可 以 层 登 。 如 果 有 多 个 选择 符 都 选择 了 同一 个 元 素 ， 那 么 这 些 选 择 符 背 后 
的 样式 都 会 起 作用 ， 但 首先 会 应 用 最 通用 的 样式 。 比 如 ， 有 一 条 规则 适用 于 所 有 标题 ， 
另 一 条 规则 适应 于 类 名 为 ArticleTitle 的 元 素 , 那么 会 先 应 用 针对 所 有 标题 的 样式 ， 然 后 
应 用 类 规则 。 结 果 ， 就 是 类 规则 会 履 盖 应 用 给 所 有 标题 的 规则 。 如 果 两 条 规则 的 针对 性 
一 样 ， 那 么 会 应 用 出 现在 样式 表 后 面 的 那个 规则 的 样式 。 


A.2.3 ŽARE 


在 复杂 的 样式 表 中 ， 有 时 候 需 要 写 一 些 说 明 来 提醒 目 己 〈 或 其 他 人 ) 为 什么 要 写 某 条 规则 ， 
以 及 该 规则 的 目的 是 什么 。 与 HTML 一 样 , 在 CSS 中 也 可 以 写 注释 , 浏览 器 同样 会 忽略 这 些 注释 。 
不 过 ，CSS 注 释 与 HTML 注 释 不 一 样 。CSS 注 释 以 字符 开头 ， 以 */ 字 符 结尾 。 下 面 这 条 注释 虽然 
没有 多 大 意义 ， 但 它 示 范 了 注释 的 语法 : 

/* 这 是 页 面 中 文章 的 标题 */ 

.ArticleTitle { 


font-size: 40px; 


j 


A.3 BR- ia BRE GE 

稍 后 我 们 会 介绍 一 个 实用 的 样式 表 。 不 过 ， 站 和 完 还 是 来 看 几 个 编号 样式 时 常用 的 高 级 技巧 。 
A.3.1 用 <div> 元 素 为 网 页 

在 编写 样式 表 时 ， 我 们 经 消 要 用 <div> 元 素来 包 疼 内容: 


<div> 
<p>Here are two paragraphs of content.</p> 
<p>In a div container.</p> 

</div> 


MERAMA, <div ó AM. BEATE, Wn AETR EEN eE 
些 可 能 的 做 法 。 

a 继承 的 值 。 有些 CSS 属 性 是 可 以 继承 的 , 也 就 是 在 一 个 元 系 上 设置 的 值 可 以 目 动 应 用 给 该 
元 素 内 部 的 所 有 元 素 。 比 如 字体 属性 ， 在 <div> 元 素 上 设置 了 该 属性 后 ， 这 个 元 素 内 部 的 
所 有 属性 乔 会 应 用 同样 的 字体 样式 〈 除 非 你 在 具体 的 元 素 上 上 覆 着 这 些 规则 )。 

Q 盒 模型 。 一 个 div> 元 系 就 是 一 个 目 然 的 容 融 。 可 以 给 它 添 加 边框 、 空 距 和 不 同 的 背景 颜 
色 (或 背景 图 片 )， 从 而 让 它 在 页 面 中 更 加 显眼 。 

O 分 栏 。 专 业 的 网 站 通 弟 会 把 内 容 分 成 两 栏 或 三 栏 。 实 现 分 栏 的 一 种 方式 就 是 把 每 一 个 栏 
的 内 容 包装 在 一 个 cdiv> 元 系 中 ， 人 然后 再 使 用 CSS 定 位 属性 将 它们 放 到 适当 的 位 置 上 。 
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提示 “既然 HTMLS 已 经 引入 了 相应 的 语义 元 素 ,《div> 元 素 的 地 位 就 不 那么 重要 了 。 如 果 可 以 把 
<div> 元 素 替 换 成 其 他 更 有 语义 的 元 素 ( 如 kheader> 或 <figure> )， 只 管 替换 好 了 。 但 在 没 
有 适当 元 素 的 情况 下 ，<div2 元 素 仍 然 是 个 不 错 的 选择 。 第 2 章 详细 介绍 过 HTML5 中 的 所 
有 新 语义 元 素 。 


<div> 元 系 还 有 一 个 小 兄弟 ， 叫 做 <span>。 与 div> 关 似 ，《<span> 元 素 也 没有 内 置 样式 。 但 不 
同 的 是 ，<div> 是 块 级 元 系 ， 用 于 分 隔 段 沙 或 整 块 内 容 ; 而 <span> 则 是 行内 元 系 ， 用 于 在 块 级 元 
系 中 包装 少量 内 容 。 比 如 ， 可 以 用 <span> 元 系 在 段 兆 中 包 淡 几 个 单词 ， 然 后 给 它们 应 用 特殊 的 














注意 CSS 鼓励 优秀 设计 。 怎 么 鼓励 的 ? 如 果 你 想 有 效 地 使 用 CSS， 人 必须 事先 规划 好 网 页 结构 。 
这 种 对 CSS 的 需求 就 会 鼓励 人 们 认真 思考 如 何 组 织 自 己 的 内 容 ， 即 便 是 临时 的 页 面 设 计 
人 员 也 不 例外 。 


A.3.2 ”多 个 选择 符 
有 时 候 ， 你 可 能 需要 定义 一 些 样式 ， 把 它们 应 用 给 多 个 元 素 或 多 个 类 。 此 时 ， 你 可 以 在 选择 


符 之 间 加 上 逗号 。 
比如 ， 下 面 这 两 级 标题 ， 分 别 有 不 同 的 字体 大 小 ， 但 有 相同 的 字体 : 
h1 1 


font-family: Impact, Charcoal, sans-serif; 
font-size: 40px; 


j 


h2 1 
font-family: Impact, Charcoal, sans-serif; 
font-size: 20px; 


j 
你 可 以 把 font-family 属 性 单独 放 到 一 条 规则 里 ， 把 它 应 用 给 两 级 标题 ， 比 如 : 
| 
font-family: Impact, Charcoal, sans-serif; 
} 
hi 1 
font-size: 40px; 
} 
h2 1 
font-size: 20px; 
j 
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关键 在 于 ,这 样 写 样式 不 吓 优秀 设计 所 必须 的 。 通 第 ,重复 设置 菏 个 属性 反倒 可 以 增加 将 来 
修改 样式 的 灵活 性 。 假 如 共 至 的 属性 太 多 ,那么 很 难 做 到 修改 一 个 元 系 类 型 或 类 ,而 不 影响 其 他 
JUR o 





A.3.3 上下文 选择 符 
上 下 文选 择 符 用 于 匹配 位 于 男 一 个 元 素 内 部 的 元 素 。 看 一 下 例子 : 


.Content h2 { 
color: #24486C; 
font-size: medium; 


} 
这 个 选择 符 移 会 查找 市 有 Content 类 的 元 系 ， 然 后 再 在 该 元 系 中 查找 <h2> 元 素 ， 找 到 之 后 为 
它们 应 用 不 同 的 文本 颜色 和 字体 大 小 。 下 面 这 段 标记 展示 了 会 应 用 该 样式 规则 的 元 素 : 


«div class-"Content"» 

















«h2»Mayan Doomsday«/h2» 

c/div» 

在 第 一 个 例子 中 ,第 一 个 选择 符 是 一 个 类 选择 符 ， 第 二 个 选择 符 ( 即 上 下 文选 择 符 ) 是 一 个 
元 素 类 型 选择 符 。 不 过 ， 你 可 以 根据 目 己 的 需要 进一步 修改 ， 比 如 下 面 这 个 例 于 : 


.Content .LeadIn ( 
font-variant: small-caps; 
} 
这 个 选择 符 会 查询 类 为 LeadIn 的 元 素 ， 但 它 必 须 被 包含 在 类 为 Content 的 元 素 中 。 比 如 ， 它 
DERE P TETUR : 
«div class-"Content"» 
<p><span class-"LeadIn"»Right now«/span», you're probably feeling pretty 


good. 
After all, life in the developed world is comfortable ...«/p» 











A 
熟悉 了 上 下 文选 择 符 的 用 法 之 后 ， 你 会 发 现 这 是 一 种 非常 直接 的 方式 ， 也 非常 有 用 。 
A.3.4 1D 选 择 符 


类 选择 符 还 有 一 个 近亲 ， 叫做 ID 选择 符 。 与 类 选择 符 相 似 ，ID 选 择 符 可 以 让 你 只 为 选 定 的 元 
素 应 用 样式 。 而 且 ， 同 样 与 类 选择 符 相 似 ， 使 用 ID 选择 符 也 可 以 挑 一 个 描述 性 的 名 字 。 只 不 过 ， 
不 能 再 使 用 句点 ， 而 要 使 用 井 号 (# )， 如 下 所 示 : 


#Menu 1 
border-width: 2px; 
borger-style: solid; 


j 


334 | 附录 A Css 简明 教程 


与 类 规则 相似 ， 除 非 你 在 HIML 中 指定 ID AUN Va tA DLRIARUBREXXS NIE. XOX 
是 使 用 class 必 性， 而 是 要 使 用 id 属性 。 比 如 ， 以 下 这 个 <div> 元 系 就 可 以 应 用 前 面 的 抽 enu 样 式 。 

«div id-"Menu"»...«/div» 

此 时 , 可 能 有 人 会 问 为 什么 要 用 ID 选 择 和 从 , 难道 ID 选 择 符 与 类 选择 从 有 什么 区 别 吗 ?的 
MEA KI: 一 个 ID 只 能 指定 给 页 面 中 的 一 个 元 素 。 以 刚才 的 标记 为 例 , 页 面 中 只 能 有 一 个 <div> 
元 素 〈 以 及 其 他 元 率 ) 可 以 市 有 Menu 这 个 ID。 但 类 属性 则 没有 这 个 限制 ， 同 一 个 类 名 可 以 随便 应 
用 给 任意 多 个 元 素 。 

这 就 意味 着 ，ID 选 择 符 非常 适合 用 来 为 那些 一 个 页 面 中 唯一 的 、 不 会 重复 的 元 素 应 用 样式 。 
而 这 也 体现 了 使 用 ID 选择 符 的 一 个 优势 , 那 就 是 清晰 地 表明 某 个 元 素 特别 重要 。 比 如 ， 页 面 中 可 
能 有 一 个 ID 选择 符 叫 Menu 或 NavigationBar, 那么 设计 师 就 知道 页 面 中 只 有 一 个 菜单 或 导航 条 。 当 
然 ， 并 不 是 非 要 使 用 ID 选择 符 不 可 。 有 些 Web 设 计 师 会 在 任何 情况 下 都 使 用 类 选择 符 ， 无 论 标 识 
的 区 块 是 不 是 唯一 。 这 只 能 说 是 萝卜 日 末 各 有 所 爱 。 



































Ci 


注意 ID 属性 在 JavaScript 中 同样 扮演 着 重要 角色 ， 它 可 以 让 开发 人 员 取 得 页 面 中 的 特殊 元 素 ， 
然后 在 代码 中 操作 该 元 素 。 本 书 中 的 示例 只 要 是 有 为 JavaScript 代 码 准 备 好 了 ID 的 ， 就 会 
使 用 ID 选择 符 来 应 用 样式 规则 。( 这 样 就 避免 了 同时 为 元 素 设置 ID 和 类 属性 。) 否则 ， 示 
例 中 就 会 使 用 类 选择 符 为 相应 的 元 素 应 用 样式 ， 无 论 该 元 素 在 页 面 中 是 否 唯一 。 


A.3.b 伪 类 选择 符 


目前 , 我 们 看 到 的 选择 符 都 是 很 直观 的 。 它 们 一 般 部 只 考虑 菏 个 显而易见 的 特点 ， 比 如 元 系 
类 型 、 类 名 或 者 D 属 性 值 。 伪 类 选择 生 就 没有 那么 好 理解 ， 因 为 还 要 考虑 其 他 方面 。 所 谓 其 他 方 
面 ， 指 的 是 那些 标记 中 并 不 存在 ， 或 者 要 根据 用 户 操作 来 确定 的 信息 。 

CSS 过 去 很 长 时 间 只 支持 几 个 伪 类 , 其 中 又 有 大 部 分 专门 为 链接 而 设计 。 比 如 ，:1ink 伪 类 用 
于 为 新 的 、 未 访问 过 的 链接 应 用 样式 ，:visited 伪 类 用 于 为 访问 过 的 链接 应 用 样式 ，:hover 伪 类 
用 于 为 用 户 鼠 标 甚 停 状 态 下 的 链接 应 用 样式 ， 而 :active 伪 类 用 于 为 鼠标 点 击 且 尚未 抬 起 状态 下 
的 链接 应 用 样式 。 你 也 看 到 了 ， 伪 类 始终 以 一 个 冒号 〈: ) 开头 。 

下 面 的 样式 规则 使 用 伪 类 创建 故意 让 人 迷惑 的 页 面 , 也 就 是 说 访问 过 的 链接 是 蓝 色 ， 而 未 访 
问 过 的 链接 是 红色 : 


a:link { 
color: red; 


} 
a:visited { 
color: blue; 


} 
伪 类 也 可 以 与 类 名 一 起 用 : 
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.BackwardLink:link ( 
color: red; 


.BackwardLink:visited 1 
color: blue; 


} 
那么 ， 为 了 应 用 这 个 新 样式 的 链接 元 系 可 能 如 下 所 未 : 
«a class-"BackwardLink" href="...">...</a> 


伪 类 并 不 是 只 能 用 来 为 链接 添加 样式 。 比 如 ， 还 可 以 用 :hover 伪 类 来 创建 动画 效果 和 好 玩 的 
按钮 。 当 然 ， 这 要 用 到 8.5 节 介绍 的 CSS 的 过 渡 功能 。 


注意 CSS3 还 增加 很 多 更 高 级 的 伪 类 ， 涉 及 很 多 其 他 细节 ， 比 如 元 素 相对 于 其 他 元 素 的 位 置 ， 
或 者 表单 中 输入 控制 的 状态 。 本 书 不 会 介绍 这 些 伪 类 ， 但 有 兴趣 的 话 ， 建 议 读者 看 看 
Smashing Magazine 上 的 这 篇 文章 : http:/tinyurl.com/3p28wau。 


A.3.6 属性 选择 符 
属性 选择 符 是 CSS3 提 供 的 新 功能 ， 可 以 选择 属性 为 特定 值 的 特定 类 型 的 元 素 。 以 下 面 这 个 
样式 规则 为 例 ， 它 只 适用 于 文本 模式 : 


input[type-"text"] 1 
background-color:silver; 


j 

Ht. PUTPYSPENPHABUSBUR dnput70R o ZAR. "EAE b veh type tE T" text" 
的 那些 cinput> 元 素 ， 只 对 这 些 元 系 应 用 样式 。 对 于 下 面 的 标记 而 言 ， 只 有 第 一 个 <input> 元 素 会 
市 有 银色 背景 ,第 二 个 元 系 则 不 会 : 

«label for-"name"»Name:«/label»«input id-"name" type="text"><br> 

«input type="submit" value-"OK"» 

严格 来 讲 ， 不 必 在 第 一 个 <input> 元 素 中 指定 type="text"， 因 为 这 是 它 的 默认 值 。 不 指定 的 
ih, 前面 的 属性 选择 符 照样 有 效 ， 因 为 它 只 关注 属性 的 当前 值 ， 而 不 关注 这 个 值 是 不 是 在 标记 中 
指定 的 。 

类 似 地 ， 也 可 以 另外 创建 一 条 规则 ， 只 应 用 给 文本 框 的 标题 ， 忽 略 其 他 标签 : 


label[for-"name"] { 
width: 200px; 


j 


























注意 ”对 属性 选择 符 ， 也 可 以 发 挥 一 点 想象 力 。 比 如 ， 可 以 同时 匹配 几 个 属性 值 ， 或 只 匹配 某 
个 属性 值 的 一 部 分 。 这 些 技术 非常 有 创意 ， 但 却 会 给 普通 的 样式 胡平 添 很 多 复杂 性 。 要 
了 解 CSS3 标 准 中 的 选择 符 ， 请 参考 http://www.w3.org/TR/css3-selectors/#selectors。 
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A4 从头 与 一 个 梓 却 表 


第 2 草 在 学 习 HIML5S 新 的 博 义 元 素 时 ， 我 们 使 用 了 一 外 观 漂 亮 的 示例 页 面 ， 文 件 名 是 
ApocalypsePage_Originalhtml ( 参见 图 A-1 )。 这 个 页 面 链接 到 了 一 个 外 部 样式 表 文 件 ， 叫 
ApocalypsePage Original.css: 


<!DOCTYPE html» 
«html lang= en > 
<head> 
«title»Apocalypse Now«/title» 
<link rel="stylesheet" href-"ApocalypsePage Original.css"» 
</head> 








* 


这 个 样式 表 比 较 简 单 明 了 ， 总 共 也 就 50 行 左右 。 本 市 我 们 就 来 分 析 这 个 样式 表 中 的 规则 。 





E: ees. n. OA 3 、 
IT -x 图 A-1: 这 个 页 面 的 样式 


€ CQ © file///C/HTML5/Chapter?62002/ApocalypsePage Original.html wo 表 很 简 单 , 但 E Ap 体现 
了 本 书 始终 遵循 的 基本 
How the World Could End 组 织 原则 


RiGHT NOW, you're probably feeling pretty good. After all, life in the developed world is 
comfortable— probably more comfortable than it's been for the average human being throughout 
all of recorded history. 


But don't get too smug. There's still plenty of horrific ways it could all fall apart. In this article, 
you'll learn about a few of our favorites. 


Mayan Doomsday 

Skeptics suggest that the Mayan calendar simply rolls to a new 5,126-year era after 2012, and 
doesn't actually predict a life-ending apocalypse. But given that the long-dead Mayans were wrong 
about virtually everything else, why should we trust them on this? 


Robot Takeover 

Not quite as frightening as a Vampire Takeover or Living-Dead Takeover, a robot rebellion is still 
a disquieting thought. We are already outnumbered by our technological gadgets, and even Bill 
Gates fears the day his Japanese robot slave turns him over by the ankles and asks (in a suitably 
robotic voice) "Who's your daddy now?" 


Unexplained Singularity 
We don't know how the universe started, so we can't be sure it won't just end, maybe today, and 
maybe with nothing more exciting than a puff of anti-matter and a slight fizzing noise. 


Runaway Climate Change 
Dismissed by some, Al Gore's prophecy of doom may still come true. If it does, we may have to 
contend with vicious storms, widespread food shortages, and surly air conditioning repairmen. 


Global Epidemic 

Some time in the future, a lethal virus could strike. Predictions differ about the source of the 
disease, but candidates include monkeys in the African jungle, bioterrorists, birds and pigs with 
the flu, warriors from the future, an alien race, hospitals that use too many antibiotics, vampires, 
the CIA, and unwashed brussel sprouts. Whatever the source, it's clearly bad news. 


These apocalyptic predictions do not reflect the views of the author. 
About Us Disclaimer Contact Us 
Copyright © 2011 
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这 个 样式 表 一 开始 是 一 个 针对 <body> 元 素 的 选择 人 符 ，<body> 是 整个 网 页 的 根 元 条 。 这 个 元 条 
上 最 适合 设置 那些 可 以 继承 的 值 ， 上 默认 情况 下 ,应 用 给 <body> 元 系 的 可 继承 值 也 会 应 用 给 文档 中 
的 其 他 元 素 。 可 继承 值 包括 外 边 距 、 内 边 距 、 背 景 颜 色 、 字 体 和 宫 度 等 ; 


body 1 
font-family: "Lucida Sans Unicode", "Lucida Grande", Geneva, sans-serif; 
max-width: 800px; 


) 

设置 font-family 这 个 CSS 属 性 ， 要 遵循 两 条 规则 。 首 先 ， 要 使 用 Web 安 全 字体 ， 也 就 是 那些 
已 知 的 所 有 能 上 网 的 计算 机 中 都 会 安装 的 字体 ( 基本 的 字体 请 参考 http://www.fonttester.com/help/ 
完 list_of_web_safe fonts.htm1， 更 有 挑战 性 的 字体 请 参考 http://www.speaking-in-styles.com/web- 
typography/Web-Safe-Fonts/ )。 其 次 , 列 出 字体 时 ,要 按照 先 特殊 后 一 般 的 原则 ， 先 给 出 你 想 要 的 
某 种 字体 ,然后 是 保险 一 些 的 后 备 字 体 , 最 后 以 serif 或 sans-serif ( 这 两 种 所 有 浏览 硕 都 能 理解 
的 ) 字体 结尾 。 如 果 你 想 特 别 想 标 新 立 异 , 希望 用 户 从 你 的 Web 服 务 絮 上 下 载 字 体 ， 可 以 参考 8.2 
节 有 关 CSS3 骨 入 字体 的 内 容 。 

针对 页 面 主体 的 样式 规则 设置 了 最 大 宽度 , 不 超过 800 像 系 。 这 条 规则 可 以 避免 文本 行 过 长 ， 
无 法 阅 谈 的 问题 ， 特 别 当 浏览 硕 窗 口 非 常 宽 的 情况 下 。 处 理 文本 行 过 宽 的 问题 还 有 其 他 方法 ， 比 
如 把 文本 分 成 几 栏 ( 参见 8.2.5 市 )， 使 用 CSS 媒 体 查 询 ( 参见 8.3.1 市 )， 或 者 在 布局 上 增加 一 栏 以 
利用 多 余 空间 。 不 过 ,设置 为 固定 的 800 像 素 客 度 还 是 比较 常用 的 手段 ， 尺 管 不 是 很 刺激 。 

接 下 来 ， 在 样式 表 中 写 一 个 针对 类 的 规则 ， 用 于 为 页 面 项 部 的 标题 区 添加 样式 : 


.Header { 
background-color: #7695FE; 
border: thin #336699 solid; 
padding: 10px; 
margin: 10px; 
text-align; center; 







































































注意 ”在 最 初 的 示例 页 面 中 (也 就 是 这 里 用 的 这 个 页 面 ), 页 面 头 部 用 一 个 类 名 为 Header 的 <divy 
元 素 。 而 第 2 章 则 探讨 了 为 什么 最 好 将 它 替换 成 HTMLS 新 增 的 <headeTr> 元 素 。 





这 条 规则 里 使 用 了 很 多 属性 。 其 中 ，background-color 属 性 可 以 接受 任何 CSS 颜 色 值 ， 比 如 
颜色 名 可 用 颜色 相对 少 一 些 )、HTML 颜 色 代 人 码 ( 如 上 所 示 ), 或 者 rgb() 也 数 ( 可 以 指定 红 、 
绿 、 蓝 分 量 的 多 少 )。 本 书 中 的 示例 用 到 了 所 有 这 三 种 手段 ， 在 人 徐 单 的 例子 中 用 的 是 颜色 值 ， 在 
接近 实际 的 例子 中 用 的 是 颜色 代码 和 rgb() 也 数 。 

顺便 提 一 下 ， 所 有 HTML 闫 色 代 码 虱 可 以 用 rgb() 孔 数 来 表示 ， 反 之 亦 然 。 比 如 ， 前 面 的 鼎 
色 代 人 码 如 果 用 rgb() 卫 数 瑟 ， 就 是 这 样 : 


background-color: rgb(118,149,254); 
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提示 “要 知道 自己 想 要 的 颜色 的 RGB 值 ， 可 以 找 个 在 线 颜 色 拾 取 器 ， 或 者 使 用 自己 常用 的 平面 
或 ,插画 绘图 软件 。 


头 部 规则 也 为 四 周 应 用 了 一 条 细 边 框 。 这 里 使 用 的 是 多 合 一 的 border 属 性 , 分别 指定 了 边框 
粗细 、 边框 闫 色 和 边框 样式 (边框 样式 可 以 设置 为 solid、 dashed, dotted, double, groove, ridge. 
inset 、outset 等 ), 一 个 属性 搞定 。 

设置 了 缘 景 闫 色 和 边框 之 后 ， 接 着 义 设置 了 10 像 素 的 内 边 距 ( 即 边 框 与 内 容 之 间 的 距离 )， 
10 像 素 的 外 边 距 〈 即 边框 与 周围 元 系 之 间 的 距离 )。 最 后 ， 将 头 部 中 的 文本 居中 。 

接 下 来 ， 再 写 一 个 上 下 文选 择 符 ， 探 制 头 部 中 元 素 的 格式 。 首 先是 头 部 中 的 <h1> 元 素 : 

.Header h1 ( 

margin: Opx; 
color: white; 


font-size: xx-large; 


} 

















设置 字体 大 小 时 ， 可 以 使 用 关键 字 ( 如 这 里 的 xXx-large 等 )。 另 外 ， 如 果 你 布 望 对 字体 控 
制 得 更 精确 ， 可 以 使 用 像素 或 em 单位 。 


提示 


再 写 两 条 类 规则 ， 分 别针 对 类 各 .Teaser 和 .Byline: 


.Header .Teaser { 
margin: Opx; 
font-weight: bold; 

j 


.Header .Byline { 
font-style: italic; 
font-size: small; 
margin: Opx; 


这 两 条 规则 能 起 作用 ， 是 因为 头 部 包含 两 个 cspan> 元 素 。 一 个 <span> 元 素 有 类 名 Teaser， 包 
含 副标题 ; 男 一 个 <span> 元 系 的 类 名 是 Byline， 包 含 作者 信息 : 


«div class= HeadeT > 
<h1>How the World Could End«/hi» 
«p class-"Teaser"»Scenarios that spell the end of life as we know«/p» 


«p class-"Byline"»by Ray N. Carnation«/p» 
</div> 
下 面 为 类 名 为 Content 的 <div> 写 一 条 规则 ， 这 个 元 素 中 包含 着 页 面 的 主要 内 容 。 规 则 中 的 样 
式 涉及 字体 、 内 边 距 、 行 高 ， 等 等 : 
.Content { 


font-size: medium; 
font-family: Cambria, Cochin, Georgia, "Times New Roman", Times, serif; 
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padding-top: 20px; 
padding-right: 50px; 
padding-bottom: 5px; 
padding-left: 50px; 
line-height: 1205; 
j 
与 头 部 规则 为 四 边 设 置 相同 的 内 边 距 不 同 ， 这 条 规则 为 页 面 内 容 的 各 边 设置 了 不 同 的 内 边 
距 。 具 体 来 说 ， 上 内 边 距 加 大 了 ,而 左 、 右 内 边 中 最 大 。 为 各 边 设置 不 同 边 距 的 一 种 做 法 就 像 这 
里 这 样 ， 使 用 padding-top 、padding-Tright 等 属性 。 邦 一 种 做 法 是 给 padding 属 性 提供 一 串 不 同 的 
值 ， 关键 是 要 记 住 值 的 顺序 。( 边 距 属性 值 的 顺序 是 上 、 右 、 下 、 左 。) 下 面 这 一 条 属性 就 可 以 取 
代 上 面 的 三 条 : 
padding: 20px 50px 5px 50px; 
一 般 来 说 , 这 种 方式 可 以 为 元 素 各 边 设置 内 边 距 ,而 针对 各 边 的 扩展 属性 则 可 以 分 别 设置 每 
一 边 的 内 边 距 。 当 然 ， 哪 种 方式 午 可 以 ， 要 看 你 目 己 的 豆 好 。 
最 后 一 个 line-height 属 性 设置 的 是 相 邻 两 个 文本 行 之 间 的 距离 。 这 里 的 120% 给 出 了 额外 的 
空间 ， 让 人 阅读 起 来 更 容易 。 
接着 要 写 三 个 上 下 文选 择 符 ， 分 别 为 内 容 中 的 三 个 元 素 应 用 样式 。 第 一 条 规则 为 类 名 为 
LeadIn 的 <span> 元 素 应 用 样式 ， 主 要 是 把 其 中 的 前 两 个 单词 加 大 ， 变 成 粗 体 和 小 型 大 写字 母 : 


.Content .LeadIn ( 
font-weight: bold; 
font-size: large: 
font-variant: small-caps; 












































后 面 两 条 规则 修改 <h2> 和 <p> 元 素 : 


.Content h2 { 
color: #24486C; 
margin-bottom: 2px; 
font-size: medium; 


.Content p { 
margin-top: Opx; 





看 到 了 吧 ， 虽 然 样式 表 越 来 越 长 ， 但 它 却 没有 变 复杂 。 所 有 样式 规则 都 在 简单 重复 基本 的 东 
西 (类 选择 符 和 上 下 文选 择 符 )， 而 这 些 基 本 的 东西 就 可 以 为 文档 的 每 个 部 分 添加 样式 。 

最 后 ,我 们 再 写 几 条 为 页 面 末尾 的 脚 部 添加 样式 的 规则 。 都 现在 了 ,你 自己 能 看 明白 ,我 就 
不 解释 了 : 


.Footer { 
text-align: center; 
font-size: x-small; 


j 
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.Footer .Disclaimer { 
Tont-styles Italic; 
j 


.Footer p 1 
margin: 3px; 


这 样 我 们 的 ApocalypsePage_Original.css 样 式 表 就 完成 了 。 如 条 你 没 跟 看 写 , 也 可 以 到 本 书 配 
TEN sa (http://www.prosetech.com/html5/) 下 载 ， 然 后 在 已 有 样式 基础 上 改 一 改 ， 看 看 绪 采 会 怎 
么 样 。 或 者 ， 再 去 看 看 本 书 第 2 章 ， 其 中 利用 HTMLS 的 语义 元 素 重 写 了 这 个 页 面 ， 样 式 表 也 相应 
作 了 调整 。 
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JavaScript 简 明教 程 


网 上 只 有 标记 。 那 时 候 ， 页 面 里 只 包含 文本 和 HTML 标 签 ， 除 此 
人 二 之 外 就 没有 什么 别 的 了 。 真 正 先 进 的 网 站 会 用 到 服务 器 端 脚本 ， 即 在 服务 器 上 先 动态 
生成 HTML 标记 ， 然 后 再 发 给 浏览 锅 ; 不 过 ， 也 仅 此 而 已 。 

今天 ， 随 便 打 开 一 个 页 面 ， 都 可 能 会 看 到 大 量 JavaScript 代 人 码 。 这 些 JavaScript 代 码 驱 动 着 网 
站 的 一 切 内 容 ， 从 重要 功能 到 给 页 面 添 加 好 看 的 滨 饰 。 目 动 完成 的 文本 框 、 弹 出 式 末 单 、 幻 灯 片 
展示 , 以 及 在 线 电邮 系统 , 这 些 只 是 高 明 的 开发 人 员 使 用 JavaScript 所 能 实现 的 无 数 功 能 中 的 一 小 
部 分 。 实 际 上 ， 没 有 JavaScript 的 Web 是 无 法 想象 的 。 虽 然 HTML 依 旧 是 Web 的 核心 语言 ， 但 
JavaScript 如 今 全 然 成 了 大 多 数 高 级 页 面 的 中 枢 神 经 系统 。 

本 附录 是 一 个 极度 浓缩 的 JavaScript 教 程 。 换 句 话 说， 这 个 附录 不 会 面面俱到 地 介绍 
JavaScript, 也 不 会 让 一 个 没 写 过 一 行 代码 的 人 蕊 上 就 能 上 手写 程序 。 不 过 , 要 是 你 有 一 些 编程 语 
言 的 基础 知识 比如 学 过 Visual Basic， 慌 得 Pascal 的 基础 知识 ， 或 者 有 Ci 语言 的 经 验 ， 那么 本 
附录 可 以 帮 你 转换 到 JavaScript 的 语 境 之 下 。 对 变量 、 和 循环、 条件 逻辑 等 常见 的 语言 要 素 , 我 们 都 
会 涉及 。 另 外 ， 对 于 本 书 JavaScript 示 例 中 用 到 的 基本 语言 要 素 ， 我 们 也 会 介绍 到 。 























提示 如果 你 没有 把 握 能 轻松 上 手 ， 可 以 再 看 看 JavaScript & jQuery: The Missing Manual, 3E 
介绍 了 jQuery 这 个 流行 的 JavaScript 工 具 包 。 另 外 ，Mozilla 详 尽 的 JavaScript 参 考 指 南 也 值 
得 学 习 : http://developer.mozilla.org/en/JavaScript/Guide. 


B.1 在 网 页 中 使 用 JavaScript 


在 接触 JavaScript 代 人 码 之 前 , 需要 知道 把 它们 放 在 网 页 的 什么 地 方 。 当 然 是 以 <script> 元 素 开 
头 啦 。 接 下 来 的 几 贡 会 展示 如 何 将 一 个 包含 临时 应 急 的 JavaScript 代 码 的 网 页 ， 组 织 成 结构 合理 、 
适合 在 线 部 署 的 页 面 。 


B.1.1 ÆR F rA HIZK 
使 用 <script> 元 素 的 最 人 简单 方式 ， 就 是 把 它 放 在 HTML 标 记 中 的 某 个 地 方 ， 比 如 : 
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«IDOCTYPE html» 
«html lang= en > 
<head> 
«meta charset-"utf-8"» 
«title»A Simple JavaScript Example«/title» 
</head> 


<body> 
<p>At some point in the processing of this page, a script block 
will run and show a message box.</p> 


<script> 
alert("We interrupt this web page with a special JavaScript announcement. "); 
</script> 


<p>If you get here, you've already seen it.«/p» 
</body> 
</html> 


这 里 的 脚本 块 中 只 包含 一 行 代 码 。 不 过 ,要 在 其 中 加 入 一 系列 操作 也 并 非 难 事 。 就 这 个 例子 
而 言 ， 这 行 代码 会 触发 JavaScript 内 置 的 alert() 阴 数 。 这 个 函数 接收 一 段 文 本 ， 人 然后 通过 一 个 消 
息 框 显示 出 来 (参见 图 B-1 )。 要 继续 浏览 网 页 ， 用 户 必须 单 击 OK 按钮 。 























Ne 图 B-1: 浏览 器 遇 到 JavaScript 代 码 时 ， 
SS E] cAHTMLSVAppendix B\SimpleJavaScript.html PProOX (zz io 不 会 立即 运行 它 E. mscr xi 览 器 会 暂 
le A Simple JavaScript Example | | 时 停止 页 面 处 理 。 此 时 l 除非 用 户 PR 

AL sore point iu tlie processing of this page, a sciipt block will ruu aud show a OK 按钮 关 I 消息 框 否则 代码 会 一 直 处 

message box. yp 、 E Cn 
于 等 待 状态 。 按 下 OK 按钮 ,代码 就 可 以 
执行 到 脚本 块 的 末尾 ， 而 浏览 器 也 可 以 


Message from webpage 


继续 处 理 其 他 标记 











注意 ”这 个 例子 中 体现 了 JavaScript 代 码 的 一 个 最 重要 的 约定 ， 这 个 约定 本 书 始终 在 遵守 ， 而 且 
Pii Rie 注意 ， 那 就 是 分 号 。 在 JavaScript 中 ， 分 号 表示 每 条 语言 的 结 来 。 
严格 地 讲 ， 分 号 有 时 候 并 不 是 必需 的 ( 除非 你 把 多 条 语句 写 在 一 行 上 )。 不 过 ， 始 终 给 每 
条 语言 ge 号 还 是 良好 的 习惯 。 
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如 果 你 希望 立即 运行 JavaScript( 就 像 这 个 例子 这 样 )， 可 以 把 脚本 代码 放 在 <body> 区 块 的 最 
后 ， 正 好 位 于 /body> 标 签 之 前 的 地 方 。 这 样 ， 脚 本 就 会 在 浏览 大 刚好 处 理 完 所 有 标记 之 后 运行 。 


处 理 Internet Explorer 的 “怪癖 ” 

如 果 是 在 Firefox 或 Chrome 中 运行 这 个 弹出 警告 框 的 例子 ,， 那 你 不 会 发 现任 何 问题 如果 
是 在 Interent Explorer 中 运行 ， 结 果 可 能 就 大 不 一 样 。 你 可 能 会 看 到 页 面 顶 部 出 现 一 个 黄色 的 
警告 条 (取决 于 下 的 版 本 )。 如 果 不 单 击 那个 黄 条 上 的 Allow Blocked Content ( 允许 阻塞 的 内 
容 )， 那 JavaScript 代码 就 不 会 执行 。 

IE 的 安全 警告 这 不 是 要 把 用 户 吓 跑 吗 ? 别 担 心 ， 这 个 警告 只 是 正在 运行 本 地 硬盘 上 的 网 
页 时 的 一 个 常见 “ 怪 注 ”。 如 果 你 是 在 网 上 打开 同一 个 页 面 , E 不 会 给 出 这 个 多 此 一 举 的 警告 。 

换 句 话说 ,至少 在 本 地 测试 网 页 时 ,这 个 安全 警告 会 很 讨厌 。 想 想 , 每 次 都 明确 地 告诉 浏 
览 器 允许 页 面 运 行 Mes 实在 太 麻 烦 了 。 为 了 解决 这 个 问题 ,可 以 让 全 以 为 你 是 从 Web 
服务 器 下 载 页 面 。 怎 么 做 呢 ? 就 是 在 页 面 头 部 加 一 条 所 谓 的 p ofthe Web ”注释 : 

«head» 


«meta charset-"utf-8"» 
«1-- saved from url-(0014)about:internet --» 


一 


«/head» 

IE 看 到 这 个 注释 后 ， 就 会 像 页 面 来 自 Web 服务 器 一 样 处 理 它 。 m 不 会 再 显示 那 
个 安全 警告 ,义无反顾 地 运行 JavaScript 代码 。 对 于 其 他 浏览 器 来 说 ,这 条 注释 跟 普 通 的 HTML 
注释 没有 分 别 ， 因 此 会 被 浏览 器 忽略 。 


B.1.2 AŽ 


前 面 例子 有 一 个 问题 ， irae 码 和 标记 混在 了 一 起 。 为 了 让 代码 井井有条 , 应 将 代码 要 
完成 的 每 个 “任务 ” 包 儿 到 一 个 函数 里 。 玉 数 ， 就 是 一 个 可 执行 的 代码 单位 ,在 需要 的 时 候 可 以 
HHE -o 

GE PRAE, EROS KREAN ERAF, HEX I showMessage: 


function showMessage() { 
// 这 里 是 函数 的 代码 …… 
j 


这 时 的 函数 只 包含 一 条 注释 ， 没 有 代码 。( JavaScript] RA ERIWER A, A AERA 
忽略 注释 。) 
接 下 来 ， 只 要 把 所 有 语句 添加 到 花 括 号 中 即 可 : 


function showMessage() { 
alert("We interrupt this web page with a special JavaScript announcement."); 


) 
当然 , BUB RBS AURTE— 4 «script» Ht, ME va ii rp E JavaScript ZIP] Ec EE T EL SUL 
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是 页 面 的 <head> 区 块 。 通 过 把 代码 转移 到 一 个 专门 的 地 方 , 可 以 让 页 面 内 容 分 门 别 类 , 井井有条 。 
以 下 是 对 前 面 示 例 代 码 进行 修改 后 的 结 来 ， 这 次 使 用 了 枉 数 : 


«IDOCTYPE html» 
«html lang= en > 
<head> 
«meta charset-"utf-8"» 
«title»A Simple JavaScript Example«/title» 
«script? 
function showMessage() ( 
alert("We interrupt this web page with a special JavaScript announcement."); 
} 
</script> 
</head> 





哨 数 ， 如 果 只 是 定义 它 ， 其 实 什 么 也 不 会 做 。 要 触发 函数 执行 ， 必 须 有 代码 调用 它 。 

调用 消 数 很 亿 单 ， 我 们 不 是 已 经 调用 过 alert() 函 数 了 嘱 。 对 ， 就 是 写 出 函数 名 ， 人 然后 再 加 
上 一 对 辆 括号 。 在 这 对 圆 括号 里 ， 可 以 辣 隐 数 传 和 数据。 或者， 如果 函数 本 号 不 接收 数据 ， 比 如 
这 里 的 showMessage() ， 那 也 可 以 什么 也 不 传 : 








«body» 
«p»At some point in the processing of this page, a script block 
will run and show a message box.«/p» 


«script? 
showMessage(); 


</script> 

<p>If you get here, you've already seen it.</p> 
</body> 
</html> 


改进 后 的 代码 包含 两 个 cscript> 块 ， 看 起 来 比 以 前 复杂 了 。 别 急 ， 这 其 实 正好 表明 了 一 个 很 
大 的 进步 ， 听 我 慢 慢 说 。 

a 代码 已 经 脱离 了 标记 。 只 要 一 行 代码 就 可 以 调用 琢 数 。 不 过 ， 真 正 的 函数 会 包含 很 多 代 
人 码 ， 而 真正 的 网 页 也 会 包含 大 量 函 数 。 所 以 ， 肯 是 要 把 代码 与 标记 分 开 。 

口 可 以 重用 代码 。 把 代码 以 困 数 形式 包 净 起 来 之 后 ， 任 何 时 候 都 可 以 调用 它 ， 也 不 用 管 是 
在 代码 的 什么 地 方 。 对 于 这 个 简单 的 例子 ， 这 一 点 似乎 不 明显 ， 而 对 于 像 第 6 章 那样 较为 
复杂 的 例 于 ， 这 个 优点 了 驶 非常 重要 了 。 

Q 只 差 一 点 就 可 以 把 脚本 转移 到 外 部 文件 中 了 。 把 代码 从 标记 中 移出 来 可 以 为 建立 单独 的 
脚本 文件 作 好 准备 ， 下 一 市 束 会 介绍 到 ， 引 用 外 部 代码 文件 更 容易 组 织 和 管理 。 

Qa 可 以 使 用 事件 了 。 什么 是 事件 ?事件 就 是 在 攻 件 事 发 生 时 ,可 以 告诉 页 面 执行 菏 个 限 数 。 
在 事件 驱动 的 页 面 中 ， 有 很 多 代码 是 徘 事件 来 触发 执行 的 ( 而 不 是 加 载 后 立即 执行 ) 事 
件 需 要 因 数 ， 通 过 事件 则 可 以 不 经 过 脚本 块 而 直接 调用 郴 数 ， 具 体 细节 请 参考 .1.4 人 。 



































注意 ”一 个 网 页 可 以 包含 任意 多 个 <scTipt> 块 。 
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B.1.3 ”把 代码 转移 到 脚本 文件 中 


把 JavaScript 代 码 集 中 到 一 块 , 特别 是 集中 到 一 个 函数 里 , 是 让 代码 有 序 的 第 一 步 。 第 二 步 就 
是 把 脚本 代码 放 到 一 个 完全 独立 的 文件 中 。 这 样 一 来 ， 网 页 的 体积 就 会 变 小 ， 同 时 函数 还 可 以 在 
更 多 网 页 中 得 到 最 大 限度 的 重用 。 事 实 上 ， 把 脚本 代码 放 在 外 部 文件 里 ， 与 把 CSS 样 式 规则 放 在 
外 部 文件 里 异曲同工 。 都 能 简化 页 面 ， 同 时 获得 更 大 的 灵活 性 。 





























注意 ”真正 设计 良好 的 网 页 都 会 把 JavaScript 代 码 放 在 一 或 多 个 文件 里 。 当 然 也 有 例外 ， 那 就 是 
不 会 重用 的 、 数 量 很 少 的 代码 ， 或 者 一 次 性 示例 的 代码 ， 仍然 可 以 放 在 网 页 里 。 








脚本 文件 也 是 纯 文 本 文件 。 一 般 来 说 ， 脚 本 文件 的 扩展 名 是 .js( 表示 JavaScript )。 把 脚本 代 
码 放 在 文件 里 , 就 要 去 掉 <script> 标 签 。 比 如, 下面 这 些 代 码 就 是 MessageScripts.js 中 的 全 部 内 容 : 
function showMessage() { 


alert("We interrupt this web page with a special JavaScript announcement."); 


j 
保存 这 个 文件 ， 然 后 把 它 放 在 与 网 页 相同 的 文件 夹 里 。 在 网 页 里 ， 再 定义 一 个 脚本 标签 ,但 
这 次 不 写 任何 代码 ， 而 是 添加 一 个 src 属 性 ， 给 出 刚才 创建 的 脚本 文件 的 路 径 : 
<!DOCTYPE html» 
«html lang= en > 
<head> 
«meta charset-"utf-8"» 
«title»A Simple JavaScript Example«/title» 


«script src-"MessageScripts.js"»«/script» 
«/head» 











«body» 
«p»At some point in the processing of this page, a script block 
will run and show a message box.«/p» 
«script» 
showMessage() 
</script> 
<p>If you get here, you've already seen it.</p> 
</body> 
</html> 


浏览 器 在 遇 到 这 个 脚本 标签 时 ， 会 请 求 MessageScripts.js 文 件 ， 然 后 就 像 其 内 容 是 写 在 网 页 
里 一 样 执行 文件 里 的 代码 。 也 就 是 说 ， 可 以 像 以 前 一 样 调用 showMessage() 困 数 。 








注意 ”在 使 用 外 部 文件 时 ， 即 使 脚本 块 中 不 包含 任何 代码 ， 也 必须 以 </script> 标 签 来 结束 它 。 如 果 
不 写 这 个 结束 标签 ， 那 浏览 器 会 假设 后 面 的 一 切 ( 包括 页 面 标记 )， 仍 然 还 是 JavaScript 代 码 。 


也 可 以 使 用 来 日 其 他 网 站 的 JavaScript 函 数 ， 只 要 把 cscript> 元 到 的 src 属 性 指 癌 一 个 完整 的 
URL ( 比如 http://SuperScriptSite.com/MessageScript.js ) 即 可 ， 只 写 一 个 文件 名 是 不 行 的 。 这 个 技 
术 对 于 引入 其 他 公司 的 Web 服 务 ( 比如 Google Maps, 参见 12.1.5 节 ) 是 非常 重要 的 。 
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B.1.4 ”响应 事件 


现在 ,我 们 已 经 知道 脚本 怎样 立即 运行 了 一 一 就 是 在 HTML 标 记 中 放 一 个 脚本 块 。 但是, 更 
常见 的 运行 脚本 的 方式 , 其 实 是 在 页面 加 和 载 之 后 , 在 用 户 单 击 按钮 或 把 鼠标 移 到 某 个 元 北 上 的 时 
候 册 运行 。 

为 此 ， 就 需要 用 到 JavaScript 事 件 。JavaScript 事 件 是 在 特定 的 事情 发 生 时 , 由 HIML 元 素 发 出 
的 通知 。 比 如 ，JavaScript 为 每 个 元 素 都 赋予 了 一 个 名 为 onMouse0ver〈 即 “鼠标 悬 俘 ”) 的 事件 。 
顾名思义 ， 这 个 事件 会 在 用 户 把 鼠标 指针 移动 到 一 个 元 系 〈 如 段 洲 、 链 接 、 图 片 、 表 格 单元 格 或 
文本 框 ) 上 面 的 时 候 发 生 〈 或 用 程序 员 的 话 ， 叫 触发 )。 在 这 个 操作 触发 onMouse0ver 事 件 后 ， 代 
公文 件 就 会 执行 。 

那 怎 么 把 代码 与 事件 关联 起 来 呢 ? 这 可 是 个 关键 的 问题 。 方 法 是 为 相应 的 元 素 添 加 一 个 事件 
属性 。 比 如 ， 要 想 处 理 <img> 元 素 上 的 onMouse0ver 事 件 ， 就 可 以 这 样 来 写 : 


«img src-"sunny.jpg" alt-"A sunny day" onmouseover-"showMessage()"» 




















注意 ”在 JavaScript 中 ， 函 数 、 变 量 和 对 象 名 都 区 分 大 小 写 。 也 就 是 说 ，showMessage 和 ShowMESS 
AGE 不 是 一 回 事 ( 后 者 在 这 里 无 效 )。 可 是 ， 事 件 属 性 名 却 不 区 分 大 小 写 。 因 为 从 技术 角 
度 讲 ,它们 是 HTML 标 记 ， 而 HTML 标 记 允 许 属 性 是 任意 大 小 写 形式 。 虽 然 如 此 ,事件 届 
性 名 全 部 小 写 (如 上 所 示 ) 仍然 是 非常 常见 的 ,一 方面 这 样 符合 XHTML 的 书写 规则 ， 另 
一 方面 大 多 数 程序 员 也 都 懒得 去 按 Shift 键 。 


这 样 ， 在 鼠标 移动 到 图 片上 的 时 候 ， 就 会 触发 onMouse0ver 事 件 ， 而 浏览 大 则 会 自动 调用 
showMessage() 国 数 ， 然 后 显示 一 个 消息 框 ( 图 B-2 )。 通 过 事件 来 触发 执行 的 图 数 ， 叫 做 事件 处 
理 程 序 。 


Firefox ~ l W| 图 B-2: 在 这 个 例子 中 ,鼠标 移动 到 图 片上 


| L JavaScript Events RS. - 4 cc 
全 || 口 mepypekopwHrMlsyAppendkbnanascipt ^7 - C] 会 | E 





We interrupt this web page with a special 
JavaScript announcement. 
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为 了 有 效 地 使 用 事件 , 应 该 知道 JavaScript 文 持 哪些 事件 。 此 外 ,， 
些 事 件 。 表 B-1 列 出 了 常见 的 事件 ， 以 及 支持 这 些 事 件 的 元 系 (更 完 





http://developer.mozilla.org/en/DOM/element )。 


事 件 名 
onClick 

onMouseOver 
onMouseOut 


onKeyDown 


onKeyUp 


onFocus 


onBlur 
onChange 


onSelect 
onError 
onLoad 


onUnload 


XB-1 常用 的 HTML 对 象 事件 
说 明 
鼠标 单 击 元 素 时 触发 











鼠标 悬 停 在 元 素 上 时 触发 
鼠标 从 元 素 上 移 开 时 触发 
按 下 未 个 键 时 触发 


释放 未 个 键 时 触发 


控件 接收 到 焦点 时 〈 也 就 是 鼠标 指针 位 于 控件 中 ， 可 
以 输入 的 时 候 ) 触发 。 这 里 所 说 的 控件 包括 文本 框 、 
复 选 框 等 ， 请 参考 4.2 刷 表 4-1 


焦点 从 控件 移 开 时 触发 








修改 了 控件 中 的 值 之 后 触发 。 对 文本 框 而 言 ， 当 移动 
到 下 一 个 控件 时 才 会 触发 

选择 输入 控件 中 的 部 分 文本 时 触发 

训 览 左下 载 图 片 失败 时 触发 

放 览 器 下 载 完 新 页 面 或 加 载 完 对 象 (如 图 片 ) 时 触发 


训 览 右 旬 载 页 面 时 触发 〈 在 浏 览 器 地 址 栏 中 输入 新 
URL 或 点 击 链接 时 发 生 ， 而 且 是 在 浏览 器 加 载 新 页 面 
前 发 生 ) 


B.2 ” JavaScript 语言 基础 


简明 的 附录 难以 详尽 解释 任何 语言 ,即使 是 像 JavaScript 这 么 直观 的 语言 也 是 不 可 能 的 .不 过 ， 
为 了 带 助 读 者 更 好 地 理解 本 书 中 给 出 的 示例 ， 下 面 我 们 还 是 给 出 一 些 相 关 的 基础 知识 。 











B.2.1 变量 

所 有 编程 语言 都 有 变 
中 的 变量 也 不 例外 ， 但 它 是 用 var 关 键 字 后 跟 变 量 名 
myMessage 的 变量 : 


var myMessage; 


Rs —M— 
fm 
42. re 
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前 提 是 浏览 器 脾气 不 错 ), 或 者 看 到 页 面 发 生生 


适用 元 素 
所 有 元 素 
所 有 元 素 
所 有 元 素 


«select», 


还 应 该 知道 哪些 元 素 支 持 哪 





«input», 


«a», «button» 


«select», 


«input», 


«a», «button» 


«select», 


«input», 


«a», «button» 


«select», 


«input», 


«a», «button» 


«select», 
«textarea» 


«input type-"text"», 


«img» 
«img», 
«body» 


整 的 参考 信息 ， 请 访问 


«textarea», 


«textarea», 


«textarea», 


«textarea», 


«input type-"text"», 


«body» 


«textarea» 





声明 的 。 下 面 这 


量 的 概念 ， 所 滑 变 量 束 是 一 个 可 以 在 内 行 中 保存 数据 的 容 带 。 JavaScript 
行 代码 创建 了 一 个 名 为 


是 myMessage 与 MyMessage 不 一 样 。 如 果 你 不 在 乎 ， 那 就 会 看 到 
着 误 ( 一般 这 种 情 


青 况 居多 )。 


要 在 变量 中 保存 信息 ,要 使 用 等 号 (= )， 等 号 会 将 其 右 侧 的 数据 复制 给 左 侧 的 变量 。 下 面 这 
个 例子 定义 了 一 个 变量 ， 然 后 把 一 个 文本 值 (文本 值 就 是 字符 串 ) 放 入 其 中 : 

var myMessage = "Everybody loves variables"; 

然后 就 可 以 使 用 变量 了 : 


// 在 消息 框 中 显示 变量 中 保存 的 文本 
alert(myMessage); 








注意 ， JavaScript 是 尽 人 恬 知 的 松散 类 型 的 语言 ， 即 使 不 使 用 var 关 键 字 声 明 ， 照 样 可 以 使 用 变 
量 。 然 而 ， 不 声明 就 使 用 变量 却 是 一 个 非常 不 好 的 习惯 ， 因 为 它 会 导致 难以 预料 的 错误 。 


B.2.2 Nullf& 


Null 值 是 一 个 特殊 值 , 程序 员 管 它 叫 做 空 值 。 如 果 变 量 值 是 nul1, 那 就 表示 给 定 对 和 象 不 存在 。 
根据 所 在 上 下 文 不 同 , 这 可 能 表示 某 个 功能 无 效 。 例 如，Modernizr ( 1.6.35 ) 用 nul1 值 判断 浏览 
偶 是 否 文 持 某 个 HITML5 功 能 。 在 脚本 中 也 可 以 检测 nul1 值 ， 比 如 确定 还 没有 创建 某 个 对 象 : 


if (myObject == null) { 
// 不 存在 my0bject 对 象 
// 现 在 可 以 创建 它 了 














B.2.3 ”变量 作用 域 
可 以 创建 变量 的 地 方 主 要 有 两 个 ,一 个 是 图 数 内 ， 一 个 是 图 数 外 。 下 面 的 代码 展示 了 这 两 种 
情况 : 


«script» 
var outsideVariable; 





function doSomething() 1 
var insideVariable; 


</script> 

如 果 是 在 函数 内 部 创建 变量 ( 此 时 叫 局 部 交 量 )， 则 该 变量 只 在 函数 运行 的 时 候 存 在 。 在 此 ， 
insideVariable 是 一 个 局 部 变量 。 只 要 doSomething() 方 法 一 结束 ， 这 个 变量 就 从 内 存 中 消失 了 。 
换 句 话说 ， 下 次 再 执行 doSomething() 方 法 ,会 重新 创建 insideVariable 变 量 ， 与 之 前 的 那个 变量 
ZIKR- 

另 一 方面 ， 如 果 是 在 函数 外 部 创建 变量 ( 此 时 叫 全 局 变量 )， 则 该 变量 的 值 会 在 浏览 锅 加 载 
页 面 期 间 始 终 存 在 。 更 进一步 ， 所 有 函数 都 可 以 使 用 这 个 变量 。 对 于 前 面 的 例子 来 说 ， 


outsideVariable 是 一 个 全 局 变量 。 
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提示 ”经验 表明 ， 最 好 使 用 局 部 变量 ， 除 非 确实 需要 在 多 个 函数 间 共 享 变量 ,或 者 想 在 函数 结 
来 后 仍然 保留 变量 的 值 。 因 为 如 果 创 建 的 全 局 变量 太 多 ,管理 难 度 会 非常 大 ,代码 很 容 
易 乱 套 。 


B.24 变量 数据 类 型 

在 JavaScript 中 ， 变 量 可 以 保存 不 同类 型 的 数据 ， 比 如 文本 、 整 数 、 浮 点 数 、 数 组 和 对 和 象 。 
但 是 , 无论 在 变量 中 保存 什么 值 ， 都 是 使 用 同一 个 var 关 键 字 。 换 名 话说 ,不必 设置 变量 的 数据 
类 型 。 

什么 意思 呢 ? 就 是 说 ， 你 可 以 给 保存 春 文本 的 变量 myMessage 赋 予 一 个 数字 值 ， 比 如 : 

myMessage = 27.3; 

不 区 分 变量 的 数据 类 型 让 JavaScript 变 得 很 灵活 , 因为 变量 可 以 保存 的 内 容 不 党 限制 。 与 此 同 
时 ,这 个 灵活 性 在 不 经 意 间 也 会 导致 JavaScript 销 误 。 比 如 , 我 们 想 从 文本 框 中 取得 文本 ,然后 将 
其 放 在 一 个 变量 中 : 

var my Message= inputElement.value; 

但 是 ， 如 采 不 小 心 的 话 ， 也 可 能 会 意外 地 把 整个 文本 框 对 象 都 保存 到 这 个 变量 里 : 

var my Message = inputElement; 

这 两 行 代码 都 会 执行 , 没有 任何 问题 。 但 只 要 几 行 类 似 的 代码 ， 就 会 造成 将 来 无 法 恢复 的 错 
误 。 此 时 ， 浏 览 硕 只 会 分 止 运行 其 他 代码 ， 不 会 告诉 你 到 确 发 生 了 什么 错误 。 























B.2.5 运算 


对 数字 值 所 能 做 的 最 有 意义 的 事情 ， 更 于 对 其 执行 运 工 ， 从 而 改变 数据 。 比 如 ， 可 以 使 用 算 
术 运 算 符 来 执行 数学 计算 : 

var myNumber = (10 + 5) * 2 / 5j 

这 行 代码 会 体 循 标准 的 数学 运算 法 则 ( 先 计算 括号 里 的 , 再 计算 乘法 ,然后 计算 除法 ,最 后 
是 加 、 减 法 )。 计算 绪 采 是 6。 











认识 JavaScript 代 码 中 的 错误 
为 了 解决 问题 (如 前 面 提 到 的 变量 错误 )， 需 要 掌握 调试 的 技术 。 也 就 是 说 ， 出 了 问题 之 
a 


后 ,你 必须 能 够 找到 错误 原因 ， 然 后 消灭 之 。 可 是 ,如何 调 试 取决 你 使 用 的 浏览 器 。 不 同 的 浏 
览 器 提供 了 不 同 的 调试 工具 (或 支持 不 同 的 调试 扩展 )。 虽 然 它 们 都 用 于 相同 的 目的 ， 但 使 用 
方法 却 不 尽 相同 。 


好 在 ， 所 有 信息 都 可 以 在 网 上 查 到 。 下 面 就 给 出 了 一 些 链接 ， 其 中 介绍 了 如 何在 不 同 浏览 


器 下 调试 JavaScript 错误 。 
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口 Internet Explorer. 3i$i3 下 调试 ， 按 Fl12 键 ， 可 以 看 到 开发 人 员工 具 窗 口 。 至 于 如 何 
使 用 ， 请 参考 http://msdn.microsoft.com/ie/aa740478。 

口 Firefox。 严 肃 的 Firefox 开发 人 员 都 使 用 一 个 名 叫 Firebug ( http://getfirebug.com/javascript ) 
的 Firefox 插件 ,通过 它 了 解 自己 代码 的 运行 情况 。Mozilla 的 文档 里 也 有 专门 对 在 Firefox 
中 调试 的 介绍 ， 值 得 参考 : http;//developer.mozilla.org/en/Debugging JavaScript. 

O Chrome. Chrome 内 置 了 一 个 非常 不 错 的 调试 工具 。 要 学 习 使 用 这 个 调试 工具 , 请 参考 
Google 的 调试 教程 : http://code.google.com/chrome/extensions/tut debugging.html. 

口 Opera。Opera 提供 的 调试 工具 叫 Dragonly ( www.opera.com/dragonfly )， 下 面 这 个 链接 
给 出 了 基本 的 调试 技巧 : http://tinyurl.com/39nv7w。 

O Safari. Safari 也 有 一 组 内 置 的 调试 工具 ， 功 能 很 强大 ， 不 过 要 查看 相关 使 用 文档 却 有 
点 费劲 。 建 议 从 Safari 开发 人 员 资 料 库 的 这 篇 技术 文章 开始 : http://tinyurl.com/63om77c。 





记 住 ,解决 问题 与 使 用 的 浏览 硕 和 调试 工具 无 天 。 只 要 把 问题 解决 了 ,所 有 人 就 都 不 会 再 看 
到 这 个 错误 了。 

通过 运算 也 可 以 把 多 段 文本 拼接 成 一 个 长 字符 串 。 在 这 里 ， 可 以 使 用 加 号 〈+ ) 运算 符 : 

var firstName = "Sarah"; 


var lastName = "Smithers"; 
var fullName = firstName + " " + lastName; 


现在 fullIName 变 量 里 保存 着 文本 “Sarah Smithers.”( 代码 中 的 " "告诉 JavaScript 在 两 个 名 字 间 
加 上 一 个 空格 

在 对 变量 进行 简单 的 修改 时 ， 可 以 使 用 一 个 快捷 方式 。 例 如 ， 以 下 是 一 个 简单 的 加 法 运算 : 

var myNumber = 20; 


myNumber = myNumber + 10; 
// (现在 myNumber 值 为 30。) 


但 这 行 代码 也 可 以 人 简写 成 这 样 : 
var myNumber = 20; 


myNumber += 10; 

// (现在 myNumber 值 为 30。 ) 

像 这 样 把 运算 符 移 到 等 号 左 侧 的 做 法 也 适合 其 他 很 多 运算 符 。 下 面 再 举 儿 个 例子 : 
var myNumber = 20; 

myNumber -- 10; 

// 〈 现 在 myNumber 值 为 10。 ) 

myNumber *- 10; 

// 〈 现 在 myNumber 值 为 100。 ) 











var myText = "Hello"; 
var myText += " there."; 
// (现在 myText 的 值 为 "Hello there." 


为 外 ， 如 来 你 想 要 给 现在 的 变量 加 1 或 减 1， 还 有 一 个 更 简洁 的 方式 : 
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var myNumber - 20; 
myNumber++; 
// (现在 myNumber 值 为 21。) 


myNumber--; 


// (现在 myNumber 值 为 20。) 


B.2 


表达 


6 ZZ 


所 有 条 件 逻 辑 痢 以 一 个 条 件 开 始 。 条 件 就 是 一 个 表达 式 ， 返 回 值 为 true 或 false。 根 据 这 个 








式 的 结果 ， 可 以 决定 是 运行 后 面 的 代码 ， 还 是 跳 过 它 。 
要 创建 条 件 ， 就 要 用 到 JavaScript 的 逻辑 运算 符 ， 如 表 B-2 所 示 。 


表 B-2 ZACAT 


等 于 

全 不 等 于 

l 逻辑 非 。 (对 条 件 取 反 ， 即 如 果 条 件 原来 为 true， 现 在 就 是 false; 反之 亦 然 ) 
< it 

d AT 

m 小 于 等 于 

— 天 于 二 下 


&& 逻辑 与 E di 返回 true) 。 如 果 第 一 个 表达 式 为 false， 不 会 对 第 
逻辑 或 (任意 一 个 表达 式 为 true， 返 回 true) 。 如 果 第 一 个 表达 式 为 true， 不 会 对 第 











下 面 一 个 条 件 逻 辑 的 简单 例子 : 
myNumber « 100 
要 基于 条 件 作 决定 ， 需 要 把 它 与 计 语 句 一 起 使 用 ， 如 : 


if (myNumber < 100) { 
// (如 果 myNumbeT 等 于 20， 会 运 和 
} 


了 这 里 的 代码 ; 如 果 它 等 于 147， 就 不 会 运行 了 。 





二 个 表达 式 求 值 





) 


注意 ”从 技术 上 讲 ， 如 果 条 件 代 码 不 超过 一 行 ， 不 需要 使 用 花 括 号 来 包 
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可 以 保证 代码 清晰 ， 避 免 在 处 理 多 条 语句 时 发 生 错 误 。 


X. e 


二 个 表达 式 求 值 


始终 使 用 花 括 号 














在 测试 相等 性 时 ， 一 定 要 使 用 两 个 等 号 。 因 为 一 个 等 号 是 设置 变量 的 值 ， 而 不 是 执行 比较 : 


// 正 确 
if (myName == "Joe") { 
} 
// 错 误 
if (myName = "Sarah") ( 
} 
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如 有 果 想 要 对 多 个 条 件 一 个 一 个 地 求 值 ， 那 么 可 以 使 用 多 个 if 块 (当然 啤 )。 但 如 果 是 想 要 遍 
历 一 系列 条 件 ， 只 找到 一 个 匹配 的 表达 式 ( 忽略 其 他 情况 )， 则 可 以 使 用 else 关 键 子 ， 比 如 : 


if (myNumber < 100) { 
// (如 果 myNumber 小 于 100， 则 运行 这 行 代码 。) 


else if (myNumber < 200) { 
// (如 果 myNumber 大 于 或 等 于 100， 但 小 于 200， 则 运行 这 行 代码 。) 
100.) 


j 


else ( 
// (其 他 情况 下 ， 即 myNumber 大 于 或 等 于 200， 则 运行 这 行 代码 。) 


可 以 使 用 任意 多 个 if 块 ， 而 最 后 的 else 语 句 也 是 可 选 的 。 


B.2.7 循环 





循环 是 一 种 基本 的 编程 手段 , 可 以 重复 地 执行 一 个 代码 块 。JavaScript 循 环 的 主力 是 for 人 循环 ， 
它 本 质 上 是 有 一 个 包含 内 置 计数 融 的 循环 。 大 多 效 编程 声言 都 有 目 己 的 for 循 环 结构 。 

编写 for 循 环 时 ， 首 移 要 设置 计数 融 的 起 始 值 ， 然 后 再 设置 终止 值 ， 再 设置 每 次 循环 计数 天 
增加 的 值 。 来 看 一 个 例子 : 

for (var i = 0; i < 5; i++){ 


// (这 行 代码 执行 5 次 。) 
alert("This is message: " + i); 








} 

循环 开始 是 一 个 包含 三 个 重要 部 分 的 括号 。 第 一 部 分 ( 即 var i = 0 ) 创建 了 计数 需 变 量 Ci) 
并 设置 了 它 的 初始 值 (0 )。 第 二 部 分 (i < 5) 设置 了 终止 条 件 。 如 果 不 是 true( 例如 ，i 增 加 到 
了 5 )， 循 环 结束 ， 内 部 的 代码 不 再 重复 执行 。 第 三 部 分 (i++ ) 增加 计数 硕 变 量 。 对 这 个 例子 而 
言 ， 每 次 循环 计数 带 变 量 加 1。 也 就 是 说 ， 第 一 次 循环 i 等 于 0， 第 二 次 循环 i 等 于 1， 以 此 类 推 。 
最 终结 果 是 代码 会 运行 5 次， 展示 下 列 消息 : 











This is message: 0 
This is message: 1 
This is message: 2 
This is message: 3 
This is message: 4 


B.2.8 ”数组 





数组 与 for 循 坏 可 请 是 天 作 之 合 。 数 组 就 是 一 个 对 象 ， 可 以 保存 一 系列 值 。 

JavaScript 数 组 异常 灵活 。 与 其 他 编程 语言 不 同 ， 在 JavaScript 中 不 必定 义 数 组 的 项 数 。 一 开 
台 只 要 使 用 方 括号 就 可 以 创建 一 个 空 数组 ， 比 如 : 

var colorlist = []; 


然后 ， 使 用 数组 的 push() 方 法 可 以 添加 元 素 : 
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colorList.push("blue"); 
colorlist.push ("green"); 
colorList.push ("red"); 


或 者 ， 可 以 指定 数组 某 个 具体 位 置 上 的 元 素 。 如 果 内 存 中 的 数组 还 没有 该 位 置 ，JavaScript 
就 会 分 配 一 个 空间 : 

colorList[3] = "magenta"; 

当然 ， 也 可 以 通过 位 置 来 取得 数组 元 条 的 值 : 


var color = colorlist[3]; 








注意 ” JavaScript 数组 使 用 基于 零 的 值 来 存 取 元 素 。 数组 第 一 项 的 索引 值 为 0, 第 二 项 的 索引 值 为 
1， 以 此 类 推 。 


在 有 了 保存 着 值 的 数组 之 后 ， 可 以 使 用 for 循 环 来 处 理 其 中 的 每 个 元 素 : 


for (var i = 0; i < colorlist.length; i++) ( 
alert("Found color: " * colorList[i]); 


Í 

以 上 代码 从 数组 的 第 一 项 〈 位 置 0 ) 移动 到 最 后 一 项 〈 位 置 以 数组 的 length 属 性 减 1 表示 , 
length 属 性 其 实 是 数组 中 的 元 素 个 数 ),， 在 消息 框 中 显示 出 所 有 元 素 值 。 当 然 ， 这 只 是 一 个 示例 ， 
你 可 以 使 用 同样 的 方法 完成 更 有 实际 意义 的 任务 。 

使 用 循环 来 处 理 数组 是 一 项 基本 的 JavaScript 技 术 。 本 书 示例 中 多 次 用 到 了 这 个 技术 , 无 论 是 
你 自己 创建 的 数组 ， 还 是 其 他 JavaScript 函 数 返 回 的 数组 ， 都 可 以 处 理 。 








B.2.9 ”取得 和 返回 数据 的 函数 


前 面 我 们 看 到 了 一 个 人 简单 的 晒 数 showMessage()。 在 调用 这 个 晒 数 时 ， 不 需要 提供 任何 数据 ， 
调用 完成 后 ， 不 会 有 任何 信息 。 

并 不 是 所 有 函数 午 这 么 简单 。 很 多 时 候 ， 者 需要 给 函数 传人 特定 的 信息 ， 或 者 从 函数 取得 返 
回 结果 ， 在 另 一 个 操作 中 使 用 该 结果 。 举 个 例 了 于， 假设 我 们 创建 一 个 showMessage() 国 数 ， 可 以 
通过 它 来 显示 不 同 的 消息 。 为 此 ， 需 要 让 showMessage() 函 数 接收 一 个 参数 (也 叫 形 参 )。 这 个 参 
数 表示 可 以 定制 的 文本 ， 将 来 会 在 消息 框 中 显示 。 

要 给 函数 添加 参数 ， 先 得 给 它 起 个 名 字 ， 比 如 customMessage， 然 后 把 它 放 在 也 数 名 后 的 括 
号 中 ， 像 这 样 : 

function showMessage(customMessage) 1| 


alert(customMessage); 


j 








注意 ”一 个 函数 可 以 接收 多 少 个 参数 是 没有 限制 的 。 只 要 把 所 有 参数 用 去 号 分 隔 开 即 可 。 
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在 函数 内 部 , 可 以 像 使 用 变量 一 样 使 用 参数 。 对 这 个 例子 而 言 , 函数 接收 到 提供 给 它 的 文本 ， 
然后 在 消息 框 中 把 它 显示 出 来 。 

现在 , 再 调用 showMessage() 隆 数 , 可 以 为 这 个 图 数 的 参数 提供 一 个 值 ( 也 就 是 所 谓 的 实 参 ) : 

showMessage("Nobody likes an argument."); 

通过 参数 可 以 把 消息 发 送 给 图 数 。 另 外 , dun] AEK, EAER M S R 
回信 息 的 关键 是 位 于 函数 末尾 的 return 天 键 字 ， 它 会 立即 停止 函数 ， 并 返回 函数 生成 的 信息 。 

当然 ， 更 复杂 的 函数 既 可 以 接收 信息 ， 又 可 以 返回 信息 。 比 如 ， 下 面 这 个 函数 计算 两 个 数 
( numberA 和 numberB ) 的 乘积 ， 然 后 返回 计算 绪 


function multiplyNumbers(numberA, numberB) { 
return numberA * numberB; 

J 

Fried pg va ep ss Ho ERICH PRAET : 


// 传 入 两 个 数值 ， 得 到 结果 
var result = multiplyNumbers(3202, 23405); 





// 使 用 结果 来 创建 一 条 消息 
var message = "The product of 3202 and 23405 is " + result; 


// 显 示 这 条 消息 
showMessage(message); 


当然 ， 你 不 一 定 要 自己 写 函 数 来 计算 乘积 (因为 一 行 简单 的 J avaScript 就 足够 了 )， 也 不 一 定 
要 写 困 数 来 显示 消息 框 〈 因为 可 以 直接 使 用 内 置 的 alert() 函 数 ),。 但 这 两 个 例子 却 展示 了 函数 的 
基本 用 法 ， 无 论 你 要 写 的 困 数 多 复杂 ， 都 要 像 前 面 的 例子 一 样 使 用 参数 和 返回 值 。 














B.3 与 页 面 区 互 


F, 现在 我 们 已 经 介绍 了 怎么 在 网 页 中 使 用 JavaScript。 可 是 , 我 们 还 没有 做 什么 有 意思 的 事 
儿 ( 事实 上 ,除了 弹出 一 个 消 县 框 , 哈 还 都 没 干 呢 ), 在 继续 深入 之 前 ,有 必要 和 完了 解 一 下 JavaScript 
的 主要 角色 。 
首先 , 要 知道 JavaScript 代 人 码 是 在 沙 箱 里 运行 的 。 什么 意思 ? 就 是 它 的 能 力 是 受 限 制 的 。 正 
为 如 此 ， 你 的 代码 不 能 在 访客 计算 机 上 执行 任何 有 风险 的 操作 ， 比 如 发 送 打印 命令 、 访 问 文件 、 
运行 其 他 程序 、 格 式 化 硬盘 ， 等 等 。 这 样 的 设计 确保 了 安全 性 ， 即 使 精心 大 意 的 用 户 也 不 会 面临 
风险 。 
那 JavaScript 能 做 什么 呢 ? 它 能 做 下 面 这 些 事 。 
O 更 新 页 面 。 脚 本 代码 可 以 改变 页 面 元 素 ， 删 除 页 面 元 素 ， 或 者 放 加 新 页 面 元 素 。 事 实 上 ， 
JavaScript 可 以 修改 当前 显示 的 网 页 的 任何 细节 ， 甚 至 能 把 整个 文档 都 蔡 换 抒 。 
口 从 服务 器 取得 数据 。 JavaScript 可 以 回来 源 页 面 所 在 的 服务 融 发 送 新 的 请 求 。 利用 这 一 点 ， 
青 结 合 上 述 技 术 ， 就 可 创建 出 流畅 地 更 新 重要 信息 的 网 页 ， 比 如 显示 新 闻 或 股票 报价 。 
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口 向 服务 器 发 送 数据 。HTML 已 经 提供 了 一 种 回 服务 器 发 送 数据 的 方式 , 那 就 是 表单 (参见 
"BASE )。 不 过 ，JavaScript 则 为 此 提供 了 一 种 巧妙 的 方式 。 你 可 以 从 表单 控件 取得 数据 ， 
验证 这 些 数 据 ， 然 后 再 把 它们 发 送 给 服务 器 。 但 这 些 操 作 不 会 刷新 页 面 。 

后 两 种 技术 都 要 用 到 XMLHttpRequest 对 象 ，11.1.1 节 介绍 过 该 对 象 。 在 接 下 来 几 节 中 , 我 们 主 

要 介绍 第 一 种 技术 ， 这 是 几乎 所 有 使 用 JavaScript 页 面 的 根本 所 在 。 

















B.3.1 操作 元 素 


在 JavaScript 的 眼 里 ， 你 的 页 面 可 不 仅仅 是 一 个 静态 的 HIML 块 。 相 反 ， 页 面 中 的 每 个 元 素 都 
是 一 个 对 象 ， 可 以 通过 JavaScript 代 人 码 检 测 和 修改 。 

取得 页 面 中 对 象 的 最 简单 方式 就 是 通过 一 个 唯一 的 名 字 找 到 它 ， 这 个 唯一 的 名 字 就 是 ID 属 
性 。 下 面 就 是 一 个 例子 : 

<h1 id-"pageTitle"»Welcome to My Page</h1> 

像 这 样 给 元 系 一 个 唯一 的 ID 后 ， 就 可 以 在 代码 中 轻易 地 找到 它 ， 然 后 再 通过 JavaScript 操 
作 它 。 

JavaScript 为 寻找 对 象 提 供 了 简单 的 方法 : document.getElementById()。 这 里 的 document 对 象 
表示 的 是 整个 HTML 文档。 这 个 对 象 始 终 是 可 以 访问 到 的 ,任何 时 候 只 要 你 想 用 都 可 以 直接 引用 
它 。 与 其 他 对 象 一 样 ，document 对 象 提 供 了 一 些 有 用 的 属性 和 方法 。 其 中 ，getElementById() 是 
最 棒 的 那 一 个 ， 它 可 以 扫描 整个 页 面 ， 从 中 找到 特定 的 元 素 。 





























注意 ”如果 你 熟悉 基本 的 面向 对 象 编程 ， 对 属性 和 方法 肯定 不 会 陌生 。 但 如 果 你 不 熟悉 的 话 ， 
我 可 以 告诉 你 ， 属 性 就 是 添加 给 对 次 的 数据 ， 而 方法 就 是 对 银 内 置 的 济 数 。 


在 调用 document .getElementById() 方 法 时 ， 要 给 它 提供 一 个 HTML 元 系 的 ID ， 以 便 查 找 。 下 
面 这 个 例子 会 在 页 面 中 查找 ID 为 pageTitle 的 HTML 元 素 : 

var titleObject = document.getElementById("pageTitle"); 

这 样 ,代码 会 找到 前 面 看 到 的 那个 <h1> 元 系 , 把 它 保存 在 一 个 名 为 title0bject 的 变量 中 。 通 
过 把 对 象 保存 在 变量 中 ， 就 可 以 随时 对 它 进 行 操作 ， 而 不 必 每 次 都 重新 去 找 它 了 。 

那 我 们 可 以 对 HTML 对 象 执 行 什么 操作 呢 ? 从 某 种 角度 讲 ， 可 以 执行 的 操作 取决 于 元 素 的 类 
型 。 例 如 ， 对 超 链接 来 说 ， 可 以 改变 它 的 URL。 如 采 是 图 片 ， 可 以 改变 其 来 源 地 址 。 男 外 ， 还 有 
一 些 操 作 是 适用 于 所 有 HTML 元 素 的 ， 比 如 修改 样式 或 者 出 现在 开始 和 结束 标签 中 间 的 文本 内 
容 。 稍 后 我 们 就 会 介绍 ,这些 技巧 对 于 创建 动态 页 面 是 非常 有 用 的 一 一 比如 , 可 以 在 访客 执行 某 
个 操作 时 《比如 点 击 链接 时 ) 改变 页 面 。 关 似 这 样 的 交互 功能 ， 可 以 让 访客 感觉 目 己 面 对 的 是 一 
个 镶 能 的 、 啊 应 性 的 程序 ， 而 非 一 个 下 板 、 人 简单 的 网 页 。 

要 修改 刚才 提 到 的 <h1> 元 素 的 文本 ， 可 以 像 下 面 这 样 做 : 


titleObject.innerHTML - "This Page Is Dynamic"; 
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以 上 代码 用 到 了 一 个 名 为 innerHTML 的 属性 ， 该 属性 用 于 设置 元 素 包 含 的 内 容 〈 对 这 个 例子 
来 说 ,就 是 <h1> 元 床 中 的 页 面 标题 ), 与 其 他 属性 一 样 ，innerHTML 只 是 HTML 众 多 属性 中 的 一 个 。 
要 写 出 类 似 这 样 的 语句 ， 必 须知 道 JavaScript 人 允许 你 访问 哪些 属性 。 

很 明显 ， 有 些 属性 只 适用 于 特定 的 HTML 元 杂 ， 比 如 src 属 性 用 于 给 <img> 元 系 加 载 新 图 片 : 


var imgObject = document.getElementById("dayImage"); 
daylmage.src = "cloudy.jpg'; 


另外 ， 也 可 以 通过 style 对 象 来 修改 CSS 样 式 : 

titleObject.style.color = "rgb(0,191,255)"; 

SU VIP is Bob eB EDOMIR TE, i5)HTJL'PPRHTMLoUR o XB-37]i p Joris 
有 用 的 一 些 属 性 。 





表 B-3 常用 的 HTML 对 象 属性 
2 8 TE 说 _ 朋 

className 用 于 取得 和 设置 class 属 性 (参见 A.2.2 节 ) 。 换 句 话 说 ， 这 个 属性 用 于 确定 元 素 会 使 用 什 
么 样式 (如果 针 对 相应 的 类 设置 了 样式 ) 。 当 然 ， 你 得 通过 租 入 或 链接 样式 表 定 义 样 式 ， 
否则 只 会 看 到 倘 单 的 默认 样式 

innerHTML 用 于 读 取 或 修改 元 素 内 部 的 HTML 标 记 。 这 个 属性 极为 有 用 ， 但 却 有 两 个 要 点 要 注意 。 首 
先 ， 可 以 通过 它 来 设置 所 有 HTML 内 容 ， 包 括 文 本 和 标签 。 因 此 要 是 想 给 段落 中 的 某 个 词 
加 粗 ， 可 以 将 innerHTML 设 置 成 <b>Hi</b>。 其 次 ， 在 设置 jnnerHTML 时 ， 会 赫 换 元 素 内 部 
的 所 有 内 容 ， 包 括 其 他 HIMEL 元 素 。 也 就 是 说 ， 如 果 设 置 了 包含 一 些 段 落 和 图 片 的 div> 
元 素 的 innerHTML 属 性 ， 那 么 这 些 段落 和 图 片 最 终 都 会 销 失 ， 代 之 以 新 设置 的 内 容 






































parentELement 保存 着 包含 当前 元 素 的 元 素 对 应 的 HIML 对 象 。 例 如 ,当前 元 素 是 段落 中 的 *b> 元 素 ,那么 
这 个 属性 中 保存 的 就 是 那个 <p> 元 素 。 取 得 了 这 个 父 元 素 后 ， 照 样 可 以 修改 它 
style 保存 有 所 有 CSS 属 性 ,决定 着 相应 HIML 元 素 的 外 观 。 技 术 上 讲 ，styjle 属 性 会 返回 完整 的 


样式 对 象 ， 如 果 想 修改 其 中 的 样式 ， 需 要 加 上 点 C) 和 要 修改 的 样式 属性 的 名 字 ， 比 如 
myElement .style.fontSize。 可 以 使 用 style 属 性 来 修改 颜色 、 边 框 、 字 体 ， 甚 至 定位 


tagName 保存 当前 对 人 象 的 HTML 元 素 的 标签 名 ， 不 带 尖 括号 。 例 如 ， 当 前 对 象 如 果 表 示 一 个 <img> 
元 素 ， 那 么 这 个 属性 会 返回 文本 "img" 


提示 HTML 元 素 也 有 具备 一 些 有 用 的 方法 ， 其 中 一 些 可 以 修改 属性 ， 比 如 getAttribute() 和 
setAttribute(); 。 还 有 一 些 可 以 添加 和 删除 元 素 ， 如 insertChild()、appendChild() 和 
TemoveChild()。 要 了 解 具 体 元 素 支 持 的 属性 和 方法 ， 请 参考 这 里 : http://developer.mozilla. 
org/en/DOM/element. 


B.3.2 动态 连接 事件 

在 B.1.4 节 ， 我 们 看 到 了 如 何 通 过 事件 属性 来 连接 函数 。 但 是 ， 通 过 JavaScript 代 码 照样 也 可 
以 把 事件 与 函数 关联 起 来 。 

多 数 情 况 下 ,你 可 能 都 会 使 用 事件 属性 。 但 有 些 情况 下 , 使 用 事件 属性 不 太 可 能 , 或 者 不 太 
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方便 。 比 如 ， 当 你 通过 代码 创建 了 一 个 HTML 对 象 并 将 其 动态 添加 到 页 面 之 后 ， 就 不 可 能 再 通过 
事件 属性 来 绑 定 处 理 程序 。 此 时 , 页 面 中 没有 新 元 素 的 标记 , 也 没有 地 方 让 你 添加 事件 属性 。( 关 
于 动态 创建 HTML 对 象 ， 可 以 参考 第 6 章 中 关于 画布 绘图 的 相关 内 容 。) 再 比如 ， 在 需要 给 内 置 对 
象 而 非 HTML 元 素 添加 事件 时 , 也 不 可 能 使 用 事件 属性 。( 可 以 参考 第 9 章 处 理 存 储 事件 的 例子 。) 
基于 以 上 原因 ， 理 解 怎样 通过 代码 来 连接 事件 就 非常 重要 了 。 


























注意 ”添加 事件 处 理 程序 的 方式 有 好 几 种 ,但 并 不 是 所 有 浏览 器 都 支持 这 些 方 式 。 本 节 恰 好 使 
用 事件 属性 的 方式 ， 但 如 果 你 在 使 用 jQuery 等 JavaScript 工 具 包 ， 那 么 也 可 能 会 用 到 它 的 
另 一 套 事件 绑 定 机 制 ， 这 套 机 制 不 仅 所 有 浏览 器 都 支持 ， 而 且 还 具备 其 他 一 些 功能 。 





好 在 添加 事件 非常 简单 ， 只 要 像 添 加 事件 属性 (property) 一 样 ， 在 代码 中 设置 事件 属性 
(attribute) 即 可 。 例 如 ,假设 你 的 页 面 中 有 如 下 <img> 元 又 : 


«img id-"dayImage" src="sunny.jpg alt= The weather"» 
如 果 你 想 让 用 户 单 击 这 张 图 片 时 调用 swapImage() 国 数 ， 那 么 可 以 这 样 : 


var imgObject = document.getElementById("dayImage"); 
imgObject.onclick = swapImage; 


Aul. TGDAEJUIDUEEBUTEA: 
imgObject.onclick = swaplmage(); 
vielem id f SE EAER URZ PIU R EHA ), AUR VERA 
返回 的 结果 设置 事件 处 理 程序 。 这 肯定 不 是 你 想 要 的 。 
ee SW 需要 看 一 看 swapImage() 咀 数 的 代码 。 这 个 子 数 会 
取得 cimg> 元 素 ， 然 后 修改 它 的 src 属 性 以 指向 新 图 片 (参见 图 B-3 ): 


// 记 录 下 从 白天 到 晚上 是 否 更 换 了 图 片 
var dayTime = true; 











/ [3X Nh 2- onClick FH A A dT 
function swapImage() { 
var imgObject = document.getElementById("dayImage"); 


// 白 天 到 晚上 ， 或 晚上 到 白天 都 要 更 换 图 片 
if (dayTime == true) { 

dayTime = false; 

imgObject.src - "cloudy.jpg"; 


else { 
dayTime = true; 
imgObject.src = "sunny.jpg"; 
J 
} 
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图 B-3: 单 击 图 片 ， 页 面 就 会 触发 事件 ， 该 事件 会 


Manipulate An Element Va 、 RT 、 X ~、 
As 一 调用 一 个 函数 该 函数 会 加 载 新 图 片 
€ CQ Q ManipulateAnElement.html 





| 
| Click this picture to change sun to cloud (and back). 





有 了 时候, 事件 会 给 事件 处 理 程序 传递 有 价值 的 信息 。 要 使 用 这 些 信息 , 需要 为 事件 处 理 程序 
添加 一 个 参数 。 按 照 惯 例 ， 这 个 参数 通常 命名 为 event 或 干脆 命名 为 e: 


function swapImage(e) { 








Í 
这 个 事件 对 象 有 哪些 属性 ， 取 决 于 具体 的 事件 。 例 如 ， 对 于 onMouseMove 事 件 ， 其 事件 对 和 象 
会 提供 鼠标 的 当前 坐标 值 (利用 这 个 坐标 值 可 以 创建 类 似 6.2 市 的 绘画 程序 )。 
还 有 一 点 值得 注意 。 如 果 代 人 码 连接 到 了 事件 , 那 你 必须 把 整个 事件 名 小 写 。 这 一 点 与 在 HTML 
中 使 用 事件 属性 是 不 一 样 的 。 与 JavaScript 不 同 ，HTML 不在乎 大 小 写 问 题 。 











注意 本 书 的 事件 采用 了 容易 看 懂 的 驼峰 式 大 小 写 方式 ， 即 每 个 单词 的 首 字母 大 写 ( 如 onLoad 
或 onMouse0veT )。 不 过 ,在 脚本 代码 中 ， 所 有 事件 都 采用 了 小 写 形 式 ( 如 onload 和 
onmouseover )， 因 dA. 


B.3.3 #A $H 


H TERTE PTIT ER, BAER PREA EEE X. swapImage() K% AHR, nf 
能 需要 跳 过 这 一 步 ， 直 接 在 想 要 添加 事件 处 理 程序 时 定义 函数 。 这 种 技术 就 叫做 说 入 函数 。 
以 下 是 一 个 为 onClick 事 件 添加 磐 入 函数 的 例子 : 


var imgObject = document.getElementById("dayImage"); 
imgObject.onclick - function() ( 

// K& X swapImage( ) s 3 6 4X, 4 

// 现 在 放 在 这 里 了 
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if (dayTime == true) { 
dayTime = false; 
imgObject.src = "cloudy.jpg'; 


else { 
dayTime -- true; 
imgObject.src - "sunny.jpg"; 
} 
}; 


这 种 快捷 写法 比 使 用 独立 的 命名 函数 少见 一 点 , 但 这 种 方式 仍然 是 非常 方便 的 , 本 书 示例 侦 
尔 会 用 到 这 种 写法 。 


注意 ，” 谈 入 函数 在 处 理 异步 任务 时 会 很 有 用 ， 异 步 任务 就 是 在 后 台 执行 的 任务 。 当 异步 任务 完 
成 时 ， 浏 览 器 会 触发 事件 ， 通 知 执行 相应 的 代码 。 有 时 候 ， 处 理 这 种 情况 的 最 清楚 的 方 
式 ， 就 是 在 任务 开始 的 位 置 放置 处 理 任务 完成 的 代码 。( 7.1.1 节 有 一 个 例子 ， 展 示 了 措 步 
加 载 和 处 理 图 片 ， 可 以 作为 参考 。) 


最 后 ， 有 一 个 航 入 孙 数 的 例子 在 本 书 很 多 示例 中 都 用 到 了 。 那 就 是 window 对 和 象 的 onLoad 事 件 
处 理 程序 ， 该 水 数 会 在 页 面 加 载 、 显 示 、 准 备 束 绕 时 执行 。 此 时 ， 正 好 是 代码 披挂 上 阵 的 时 候 。 
如 果 在 此 之 前 运行 代码 ， 可 能 会 遇 到 问题 ， 比 如 对 应 某 些 元 素 的 对 象 还 没有 创建 完成 : 


«script» 
window.onload = function() { 

alert("The page has just finished loading.); 
j 


</script> 
使 用 这 种 方式 ， 可 以 不 必 担 心 脚本 块 的 位 置 。 你 照样 可 以 把 初始 化 代码 放 在 chead> 区 块 中 ， 
与 其 他 JavaScript 汕 数 放 在 一 起 。 
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HTML5 / WEB DEVELOPMENT 


HTMLS5 不 仅仅 是 一 种 标记 语言 ， 
了 的 模块 。 到 现在 为 止 ，HTMLS 只 


它 还 是 新 一 代 Web 标 准 ， 共 包含 12 个 独 


缺 一 本 全 面 的 手册 。 本 书 就 是 这 样 


一 本 内 容 全 面 、 通 俗 易 懂 的 HTML5 学 习 指 南 。 通 过 本 书 ， 你 将 学 会 构建 


Web 应 用 ， 包 括 视 频 工具 、 


动态 绘图 、 地 理 定 位 、 离 线 Web 应 用 、 拖 放 


和 其 他 众多 功能 。HTMIL5 代 表 着 Web 的 未 来 ， 而 本 书 将 带 你 阔步 走向 未 


水 


the missing manual 


The book that should have been in the box: 





组 织 Web 页 面 结构 的 新 方式 。 如 何 借助 HTML5 使 Web 设 计 工 具 和 
搜索 引擎 更 加 智能 ; 


不 依赖 插件 添加 音频 和 视频 。 构 建 适用 于 所 有 浏览 器 的 播放 页 
H; 
Canvas 绘 图 。 创 建 形 状 、 图 片 、 文 本 和 动画 ， 并 使 其 具备 交互 性 ; 
空气 样式 的 新 功能 。 使 用 CSS3 和 HTML5 为 网 页 增加 引 人 注 目的 
效果 ， 并 将 其 用 于 移动 设备 ，; 
利用 丰富 的 桌面 功能 构建 网 页 。 让 用 户 在 离线 状态 下 在 浏览 器 中 
使 用 你 的 应 用 ， 并 处 理 自己 选择 的 文件 ; 
创建 位 置 感知 应 用 。 直 接 在 浏览 器 中 编写 地 理 位 置 应 用 。 
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Ex BUR RJIT2S FB. T- -B AE EESEG 


电子 出 版 的 时 代 已 经 来 临 。 在 许多 出 版 界 同行 还 在 犹 
豫 丛 得 的 时 候 ， 图 灵 社 区 已 经 采取 实际 行动 拥抱 这 个 
出 版 业 巨 变 。 作 为 国内 第 一 家 发 售 电子 图 书 的 IT 类 出 
上 厂商， 图 灵 社 区 目前 为 读者 提供 两 种 DRM-free 的 阅读 
体验 : 在 线 阅 读 和 PDF。 























相 比 纸 质 书 ， 电 子 书 具 有 许多 明显 的 优势 。 它 不 仅 发 
布 快 ， 更 新 容易 ， 而 且 尽 可 能 采用 了 彩色 图 片 〈 即 使 
有 的 书 纸 质 版 是 墨 日 印刷 的 ) 。 读 者 偿 可 以 方便 地 进 
行 搜 索 、 剪 贴 、 复 制 和 打印 。 


最 方便 的 开放 出 版 平台 


图 灵 社 区 癌 读 者 开放 在 线 写 作 功 能 ， 协 助 你 实现 目 出 
版 和 开源 出 版 的 梦想 。 利 用 “合集 功能 ， 你 就 能 联 
合 二 三 好 友 共 同 创 作 一 部 技术 参考 书 ， 以 免费 或 收费 
的 形式 提供 给 读者 。 (收费 形式 须 经 过 图 灵 社 区 立项 
评审 。) 这 极 大 地 降低 了 出 版 的 门槛 。 只 要 你 有 写作 
的 意愿 ， 图 灵 社 区 就 能 帮助 你 实现 这 个 梦想 。 成 熟 的 
书稿 ， 有 机 会 入 选 出 版 计划 ， 同 时 出 版 纸 质 书 。 








图 灵 社 区 引进 出 版 的 外 文 图 书 ， 都 将 在 立项 后 马上 在 
社区 公布 。 如 采 你 有 意 翻 译 哪 本 图 书 ， 欢 迎 你 来 社区 
申请 。 只 要 你 通过 试 译 的 考验 ， 即 可 签约 成 为 图 灵 的 
译 首 。 当 然 ， 要 想 成 功 地 完成 一 本 书 的 翻译 工作 ， 是 
需要 有 坚强 的 妆 力 的 。 


欢迎 加 入 


ZI RIEK 


图 灵 社 区 进一步 把 传统 出 版 流程 与 电子 书 出 版 业务 
崇 密 结合 ， 目 前 已 实现 作 译 着 网 上 交 稿 、 编 辑 网 上 
审 稳 、 按 革 发 布 的 电子 出 版 模式 。 这 种 新 的 出 版 模 
式 ， 我 们 称 之 为 “敏捷 出 版 ”， 它 可 以 让 谈 者 以 较 
快 的 速度 了 解 到 国外 最 新 技术 图 书 的 内 容 ， 弥 补 以 
往 翻 译 版 技术 书 “ 出 版 即 过 时 ”的 缺憾 。 同 时 ， 敏 
捷 出 版 使 得 作 、 译 、 编 、 读 的 交流 更 为 方便 ， 可 以 
提前 消灭 书稿 中 的 销 误 ， 最 大 程度 地 保证 图 书 出 版 


的 质量 o 











最 直接 的 读者 交流 平台 


在 图 灵 社 区 ， 你 可 以 十 分 方便 地 写作 文章 、 提 交 勘 
误 、 发 表 评 论 ， 以 各 种 方式 写作 译 者 、 编 辑 人 员 和 
其 他 读者 进行 交流 互动 。 提 交 勘 误 还 能 够 医 赠 社区 
银子 。 





你 可 以 积极 参与 社区 经 毕 开 展 的 访谈 、 审 恋 、 评 选 
等 多 种 活动 ， 最 取 积 分 和 银子 ， 积 累 个 人 声望 。 
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